From 6fd4e288138141b90af958b226530f419c73b76d Mon Sep 17 00:00:00 2001 From: Nate Butler Date: Mon, 13 Mar 2023 12:59:17 -0400 Subject: [PATCH 1/3] Update picker active and hover styles Thanks for pointing this out @ForLoveOfCats Co-Authored-By: Julia <30666851+ForLoveOfCats@users.noreply.github.com> --- styles/src/styleTree/picker.ts | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/styles/src/styleTree/picker.ts b/styles/src/styleTree/picker.ts index 2a6c3a0caf..3245112345 100644 --- a/styles/src/styleTree/picker.ts +++ b/styles/src/styleTree/picker.ts @@ -1,4 +1,5 @@ import { ColorScheme } from "../themes/common/colorScheme" +import { withOpacity } from "../utils/color" import { background, border, text } from "./components" export default function picker(colorScheme: ColorScheme) { @@ -53,14 +54,17 @@ export default function picker(colorScheme: ColorScheme) { text: text(layer, "sans", "variant"), highlightText: text(layer, "sans", "accent", { weight: "bold" }), active: { - background: background(layer, "base", "active"), + background: withOpacity( + background(layer, "base", "active"), + 0.5 + ), text: text(layer, "sans", "base", "active"), highlightText: text(layer, "sans", "accent", { weight: "bold", }), }, hover: { - background: background(layer, "hovered"), + background: withOpacity(background(layer, "hovered"), 0.5), }, }, inputEditor, From 7df2440757098433264ba13da0e2b69dd087157c Mon Sep 17 00:00:00 2001 From: Nate Butler Date: Mon, 13 Mar 2023 12:59:23 -0400 Subject: [PATCH 2/3] Format --- styles/src/styleTree/statusBar.ts | 4 +-- styles/src/styleTree/welcome.ts | 49 ++++++++++++++++--------------- styles/src/styleTree/workspace.ts | 11 +++++-- 3 files changed, 36 insertions(+), 28 deletions(-) diff --git a/styles/src/styleTree/statusBar.ts b/styles/src/styleTree/statusBar.ts index 9fa427d302..b7e9696488 100644 --- a/styles/src/styleTree/statusBar.ts +++ b/styles/src/styleTree/statusBar.ts @@ -29,8 +29,8 @@ export default function statusBar(colorScheme: ColorScheme) { padding: { left: 6, right: 6 }, ...text(layer, "sans", "variant"), hover: { - ...text(layer, "sans", "on") - } + ...text(layer, "sans", "on"), + }, }, autoUpdateProgressMessage: text(layer, "sans", "variant"), autoUpdateDoneMessage: text(layer, "sans", "variant"), diff --git a/styles/src/styleTree/welcome.ts b/styles/src/styleTree/welcome.ts index e1bd5c82bb..252489ef1b 100644 --- a/styles/src/styleTree/welcome.ts +++ b/styles/src/styleTree/welcome.ts @@ -1,11 +1,15 @@ - -import { ColorScheme } from "../themes/common/colorScheme"; -import { withOpacity } from "../utils/color"; -import { border, background, foreground, text, TextProperties } from "./components"; - +import { ColorScheme } from "../themes/common/colorScheme" +import { withOpacity } from "../utils/color" +import { + border, + background, + foreground, + text, + TextProperties, +} from "./components" export default function welcome(colorScheme: ColorScheme) { - let layer = colorScheme.highest; + let layer = colorScheme.highest let checkboxBase = { cornerRadius: 4, @@ -20,9 +24,9 @@ export default function welcome(colorScheme: ColorScheme) { margin: { right: 8, top: 5, - bottom: 5 + bottom: 5, }, - }; + } let interactive_text_size: TextProperties = { size: "sm" } @@ -34,7 +38,7 @@ export default function welcome(colorScheme: ColorScheme) { dimensions: { width: 64, height: 64, - } + }, }, logoSubheading: { ...text(layer, "sans", "variant", { size: "md" }), @@ -46,13 +50,13 @@ export default function welcome(colorScheme: ColorScheme) { buttonGroup: { margin: { top: 8, - bottom: 16 + bottom: 16, }, }, headingGroup: { margin: { top: 8, - bottom: 12 + bottom: 12, }, }, checkboxGroup: { @@ -62,7 +66,7 @@ export default function welcome(colorScheme: ColorScheme) { padding: { left: 12, top: 2, - bottom: 2 + bottom: 2, }, }, button: { @@ -71,7 +75,7 @@ export default function welcome(colorScheme: ColorScheme) { cornerRadius: 4, margin: { top: 4, - bottom: 4 + bottom: 4, }, padding: { top: 3, @@ -90,8 +94,7 @@ export default function welcome(colorScheme: ColorScheme) { ...text(layer, "sans", "variant", { size: "2xs" }), padding: { top: -4, - - } + }, }, checkboxContainer: { margin: { @@ -99,7 +102,7 @@ export default function welcome(colorScheme: ColorScheme) { }, padding: { bottom: 8, - } + }, }, checkbox: { label: { @@ -112,28 +115,28 @@ export default function welcome(colorScheme: ColorScheme) { dimensions: { width: 12, height: 12, - } + }, }, default: { ...checkboxBase, background: background(layer, "default"), - border: border(layer, "active") + border: border(layer, "active"), }, checked: { ...checkboxBase, background: background(layer, "hovered"), - border: border(layer, "active") + border: border(layer, "active"), }, hovered: { ...checkboxBase, background: background(layer, "hovered"), - border: border(layer, "active") + border: border(layer, "active"), }, hoveredAndChecked: { ...checkboxBase, background: background(layer, "hovered"), - border: border(layer, "active") - } - } + border: border(layer, "active"), + }, + }, } } diff --git a/styles/src/styleTree/workspace.ts b/styles/src/styleTree/workspace.ts index bebe87ce55..cb78638f70 100644 --- a/styles/src/styleTree/workspace.ts +++ b/styles/src/styleTree/workspace.ts @@ -55,7 +55,12 @@ export default function workspace(colorScheme: ColorScheme) { }, }, logoShadow: { - color: withOpacity(colorScheme.isLight ? "#FFFFFF" : colorScheme.lowest.base.default.background, colorScheme.isLight ? 1 : 0.6), + color: withOpacity( + colorScheme.isLight + ? "#FFFFFF" + : colorScheme.lowest.base.default.background, + colorScheme.isLight ? 1 : 0.6 + ), icon: "icons/logo_96.svg", dimensions: { width: 256, @@ -74,12 +79,12 @@ export default function workspace(colorScheme: ColorScheme) { top: 3, left: 8, right: 8, - bottom: 3 + bottom: 3, }, cornerRadius: 8, hover: { ...text(layer, "sans", "active", { size: "sm" }), - } + }, }, keyboardHintWidth: 320, }, From e64fe6d6609937ad74e4ad6ecb549b9dcf7c9460 Mon Sep 17 00:00:00 2001 From: Nate Butler Date: Mon, 13 Mar 2023 13:10:46 -0400 Subject: [PATCH 3/3] Improve contrast of project panel active state in light themes --- styles/src/styleTree/projectPanel.ts | 146 +++++++++++++-------------- 1 file changed, 73 insertions(+), 73 deletions(-) diff --git a/styles/src/styleTree/projectPanel.ts b/styles/src/styleTree/projectPanel.ts index 80cb884c48..3569e82314 100644 --- a/styles/src/styleTree/projectPanel.ts +++ b/styles/src/styleTree/projectPanel.ts @@ -3,80 +3,80 @@ import { withOpacity } from "../utils/color" import { background, border, foreground, text } from "./components" export default function projectPanel(colorScheme: ColorScheme) { - let layer = colorScheme.middle + let layer = colorScheme.middle - let baseEntry = { - height: 24, - iconColor: foreground(layer, "variant"), - iconSize: 8, - iconSpacing: 8, - } + let baseEntry = { + height: 24, + iconColor: foreground(layer, "variant"), + iconSize: 8, + iconSpacing: 8, + } - let entry = { - ...baseEntry, - text: text(layer, "mono", "variant", { size: "sm" }), - hover: { - background: background(layer, "variant", "hovered"), - }, - active: { - background: background(layer, "active"), - text: text(layer, "mono", "active", { size: "sm" }), - }, - activeHover: { - background: background(layer, "active"), - text: text(layer, "mono", "active", { size: "sm" }), - }, - } + let entry = { + ...baseEntry, + text: text(layer, "mono", "variant", { size: "sm" }), + hover: { + background: background(layer, "variant", "hovered"), + }, + active: { + background: colorScheme.isLight ? withOpacity(background(layer, "active"), 0.5) : background(layer, "active"), + text: text(layer, "mono", "active", { size: "sm" }), + }, + activeHover: { + background: background(layer, "active"), + text: text(layer, "mono", "active", { size: "sm" }), + }, + } - return { - openProjectButton: { - 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"), - border: border(layer, "active"), - }, - }, - background: background(layer), - padding: { left: 12, right: 12, top: 6, bottom: 6 }, - indentWidth: 8, - entry, - draggedEntry: { - ...baseEntry, - text: text(layer, "mono", "on", { size: "sm" }), - background: withOpacity(background(layer, "on"), 0.9), - border: border(layer), - }, - ignoredEntry: { - ...entry, - text: text(layer, "mono", "disabled"), - }, - cutEntry: { - ...entry, - text: text(layer, "mono", "disabled"), - active: { - background: background(layer, "active"), - text: text(layer, "mono", "disabled", { size: "sm" }), - }, - }, - filenameEditor: { - background: background(layer, "on"), - text: text(layer, "mono", "on", { size: "sm" }), - selection: colorScheme.players[0], - }, - } + return { + openProjectButton: { + 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"), + border: border(layer, "active"), + }, + }, + background: background(layer), + padding: { left: 12, right: 12, top: 6, bottom: 6 }, + indentWidth: 8, + entry, + draggedEntry: { + ...baseEntry, + text: text(layer, "mono", "on", { size: "sm" }), + background: withOpacity(background(layer, "on"), 0.9), + border: border(layer), + }, + ignoredEntry: { + ...entry, + text: text(layer, "mono", "disabled"), + }, + cutEntry: { + ...entry, + text: text(layer, "mono", "disabled"), + active: { + background: background(layer, "active"), + text: text(layer, "mono", "disabled", { size: "sm" }), + }, + }, + filenameEditor: { + background: background(layer, "on"), + text: text(layer, "mono", "on", { size: "sm" }), + selection: colorScheme.players[0], + }, + } }