From b31890eed5db52a92505e30474ff998c44472abb Mon Sep 17 00:00:00 2001 From: szecket Date: Tue, 9 Sep 2025 13:40:26 -0400 Subject: [PATCH 1/2] Cupertino button colors for Primary and secondary buttons assigned correctly --- .../compiler/widgets/cupertino/button.slint | 24 ++++++++--------- .../compiler/widgets/cupertino/styling.slint | 26 +++++++------------ 2 files changed, 21 insertions(+), 29 deletions(-) diff --git a/internal/compiler/widgets/cupertino/button.slint b/internal/compiler/widgets/cupertino/button.slint index 5ee0eee4263..38ecc9b26e7 100644 --- a/internal/compiler/widgets/cupertino/button.slint +++ b/internal/compiler/widgets/cupertino/button.slint @@ -31,19 +31,20 @@ export component Button { accessible-checkable: root.checkable; accessible-checked: root.checked; accessible-label: root.text; - accessible-action-default => { i-touch-area.clicked(); } - + accessible-action-default => { + i-touch-area.clicked(); + } states [ - disabled when !i-touch-area.enabled : { + disabled when !i-touch-area.enabled: { root.text-color: CupertinoPalette.foreground-secondary; root.background: CupertinoPalette.quaternary-control-background; } - pressed when root.pressed : { + pressed when root.pressed: { root.background: root.primary ? CupertinoPalette.secondary-accent-background : CupertinoPalette.secondary-control-background; } - checked when root.checked : { - root.text-color: CupertinoPalette.secondary-accent-background; + checked when root.checked: { + root.text-color: CupertinoPalette.accent-foreground; } ] @@ -58,7 +59,7 @@ export component Button { has-focus: root.has-focus; } - if (root.primary && root.enabled) : Rectangle { + if (root.primary && root.enabled): Rectangle { drop-shadow-blur: 3px; drop-shadow-color: #00000066; drop-shadow-offset-y: 0.5px; @@ -88,7 +89,7 @@ export component Button { } } - if (!root.primary || !root.enabled) : Rectangle { + if (!root.primary || !root.enabled): Rectangle { drop-shadow-blur: 0.25px; drop-shadow-color: #00000066; drop-shadow-offset-y: 0.25px; @@ -115,7 +116,7 @@ export component Button { spacing: 4px; alignment: center; - if (root.icon.width > 0 && root.icon.height > 0) : Image { + if (root.icon.width > 0 && root.icon.height > 0): Image { y: (parent.height - self.height) / 2; source <=> root.icon; width: 13px; @@ -123,7 +124,7 @@ export component Button { colorize: root.colorize-icon ? root.text-color : transparent; } - if (root.text != "") : Text { + if (root.text != ""): Text { opacity: root.enabled ? 1 : 0.5; font-size: CupertinoFontSettings.body.font-size; font-weight: CupertinoFontSettings.body.font-weight; @@ -153,9 +154,8 @@ export component Button { key-pressed(event) => { if (event.text == " " || event.text == "\n") { i-touch-area.clicked(); - return accept; + return accept; } - return reject; } } diff --git a/internal/compiler/widgets/cupertino/styling.slint b/internal/compiler/widgets/cupertino/styling.slint index 7c280455fdb..17ca566fbb2 100644 --- a/internal/compiler/widgets/cupertino/styling.slint +++ b/internal/compiler/widgets/cupertino/styling.slint @@ -13,23 +13,14 @@ export global CupertinoFontSettings { out property regular-font-weight: 400; out property semibold-font-weight: 600; - out property body: { - font-size: 13 * 0.0769rem, - font-weight: regular-font-weight - }; + out property body: { font-size: 13 * 0.0769rem, font-weight: regular-font-weight }; - - out property title: { - font-size: 28 * 0.0769rem, - font-weight: light-font-weight - }; + out property title: { font-size: 28 * 0.0769rem, font-weight: light-font-weight }; // needed? - out property body-strong: { - font-size: 14 * 0.0769rem, - font-weight: semibold-font-weight - }; + out property body-strong: { font-size: 14 * 0.0769rem, font-weight: semibold-font-weight }; } + export global CupertinoColors { out property systemGray: #8E8E93; out property systemGray2: #AEAEB2; @@ -63,6 +54,7 @@ export global CupertinoColors { out property selection-color: self.blue; } + export global CupertinoPalette { in-out property color-scheme: ColorSchemeSelector.color-scheme; property dark-color-scheme: { @@ -73,11 +65,11 @@ export global CupertinoPalette { } // base palette - out property background: dark-color-scheme ? CupertinoColors.systemGray55-dark: CupertinoColors.systemGray55; + out property background: dark-color-scheme ? CupertinoColors.systemGray55-dark : CupertinoColors.systemGray55; out property foreground: dark-color-scheme ? CupertinoColors.systemGray6 : CupertinoColors.systemGray6-dark; out property alternate-background: dark-color-scheme ? CupertinoColors.systemGray5-dark : CupertinoColors.systemGray5; out property alternate-foreground: dark-color-scheme ? CupertinoColors.systemGray5 : CupertinoColors.systemGray5-dark; - out property control-background: dark-color-scheme ? CupertinoColors.systemGray2-dark : CupertinoColors.systemGray6; + out property control-background: dark-color-scheme ? CupertinoColors.systemGray2-dark : CupertinoColors.white; out property control-foreground: dark-color-scheme ? CupertinoColors.systemGray4 : CupertinoColors.systemGray5-dark; out property accent-background: dark-color-scheme ? CupertinoColors.selection-color : CupertinoColors.selection-color; out property accent-foreground: CupertinoColors.systemGray5; @@ -92,7 +84,7 @@ export global CupertinoPalette { out property tertiary-accent-background: dark-color-scheme ? CupertinoColors.blue : CupertinoColors.blue; out property foreground-neg: dark-color-scheme ? CupertinoColors.systemGray6-dark : CupertinoColors.systemGray6; out property foreground-secondary: dark-color-scheme ? CupertinoColors.systemGray6.transparentize(0.4) : CupertinoColors.systemGray6-dark.transparentize(0.4); - out property secondary-control-background: dark-color-scheme ? CupertinoColors.systemGray : CupertinoColors.systemGray; + out property secondary-control-background: dark-color-scheme ? CupertinoColors.systemGray : CupertinoColors.systemGray55; out property tertiary-control-background: dark-color-scheme ? CupertinoColors.systemGray5-dark : CupertinoColors.systemGray5; out property quaternary-control-background: dark-color-scheme ? CupertinoColors.systemGray2-dark : CupertinoColors.systemGray6; out property alternate-control-background: dark-color-scheme ? CupertinoColors.systemGray3-dark : CupertinoColors.systemGray3; @@ -104,7 +96,7 @@ export global CupertinoPalette { out property separator: dark-color-scheme ? CupertinoColors.systemGray6-dark : CupertinoColors.systemGray4; out property bar-background: dark-color-scheme ? CupertinoColors.systemGray4-dark : CupertinoColors.systemGray4; out property bar-border: dark-color-scheme ? @linear-gradient(180deg, CupertinoColors.systemGray4-dark 0%, CupertinoColors.systemGray3-dark 80%, CupertinoColors.systemGray2-dark 100%) : CupertinoColors.systemGray5; - out property inner-border: dark-color-scheme ? CupertinoColors.systemGray5-dark: CupertinoColors.systemGray4; + out property inner-border: dark-color-scheme ? CupertinoColors.systemGray5-dark : CupertinoColors.systemGray4; out property inner-shadow: dark-color-scheme ? CupertinoColors.systemGray5-dark : CupertinoColors.systemGray6; out property state: dark-color-scheme ? CupertinoColors.systemGray6 : CupertinoColors.systemGray6-dark; From 368a9e481926e69873c5489a14056722f9040044 Mon Sep 17 00:00:00 2001 From: szecket Date: Wed, 10 Sep 2025 09:27:25 -0400 Subject: [PATCH 2/2] fixed regression on accent foreground --- internal/compiler/widgets/cupertino/button.slint | 4 ++-- internal/compiler/widgets/cupertino/styling.slint | 6 +++--- tools/lsp/ui/main.slint | 11 ++++++----- 3 files changed, 11 insertions(+), 10 deletions(-) diff --git a/internal/compiler/widgets/cupertino/button.slint b/internal/compiler/widgets/cupertino/button.slint index 38ecc9b26e7..cfb0229aace 100644 --- a/internal/compiler/widgets/cupertino/button.slint +++ b/internal/compiler/widgets/cupertino/button.slint @@ -1,7 +1,7 @@ // Copyright © SixtyFPS GmbH // SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-Royalty-free-2.0 OR LicenseRef-Slint-Software-3.0 -import { CupertinoFontSettings, CupertinoPalette } from "styling.slint"; +import { CupertinoFontSettings, CupertinoPalette, CupertinoColors } from "styling.slint"; import { FocusBorder } from "components.slint"; export component Button { @@ -44,7 +44,7 @@ export component Button { root.background: root.primary ? CupertinoPalette.secondary-accent-background : CupertinoPalette.secondary-control-background; } checked when root.checked: { - root.text-color: CupertinoPalette.accent-foreground; + root.text-color: root.primary ? CupertinoColors.white : CupertinoPalette.secondary-accent-background; } ] diff --git a/internal/compiler/widgets/cupertino/styling.slint b/internal/compiler/widgets/cupertino/styling.slint index 17ca566fbb2..9bb9aacaf45 100644 --- a/internal/compiler/widgets/cupertino/styling.slint +++ b/internal/compiler/widgets/cupertino/styling.slint @@ -45,7 +45,7 @@ export global CupertinoColors { out property mint: #00C7BE; out property teal: #59ADC4; out property cyan: #55BEF0; - out property blue: #326CCF; + out property blue: #4585F2; out property indigo: #5856D6; out property purple: #AF52DE; out property pink: #FF2D55; @@ -69,7 +69,7 @@ export global CupertinoPalette { out property foreground: dark-color-scheme ? CupertinoColors.systemGray6 : CupertinoColors.systemGray6-dark; out property alternate-background: dark-color-scheme ? CupertinoColors.systemGray5-dark : CupertinoColors.systemGray5; out property alternate-foreground: dark-color-scheme ? CupertinoColors.systemGray5 : CupertinoColors.systemGray5-dark; - out property control-background: dark-color-scheme ? CupertinoColors.systemGray2-dark : CupertinoColors.white; + out property control-background: dark-color-scheme ? CupertinoColors.systemGray3-dark : CupertinoColors.white; out property control-foreground: dark-color-scheme ? CupertinoColors.systemGray4 : CupertinoColors.systemGray5-dark; out property accent-background: dark-color-scheme ? CupertinoColors.selection-color : CupertinoColors.selection-color; out property accent-foreground: CupertinoColors.systemGray5; @@ -103,7 +103,7 @@ export global CupertinoPalette { out property state-secondary: dark-color-scheme ? CupertinoColors.systemGray6-dark : CupertinoColors.systemGray6; // FIXME: dark color - out property dimmer: @linear-gradient(180deg, CupertinoColors.white 100%, CupertinoColors.black 0%); + out property dimmer: @linear-gradient(180deg, CupertinoColors.white.transparentize(0.9) 100%, CupertinoColors.black 0%); } export global Icons { diff --git a/tools/lsp/ui/main.slint b/tools/lsp/ui/main.slint index 0ddd3591049..e4b1214dead 100644 --- a/tools/lsp/ui/main.slint +++ b/tools/lsp/ui/main.slint @@ -62,7 +62,7 @@ export component PreviewUi inherits Window { WindowGlobal.window-height = self.height; } - if Api.show-preview-ui : MenuBar { + if Api.show-preview-ui: MenuBar { Menu { title: @tr("File"); @@ -149,6 +149,7 @@ export component PreviewUi inherits Window { checked <=> root.console-panel-expanded; } } + if !Api.runs-in-slintpad: Menu { title: @tr("Window"); MenuItem { @@ -179,11 +180,10 @@ export component PreviewUi inherits Window { } if Api.show-preview-ui: FocusScope { key-pressed(event) => { - if Api.undo-enabled && event.modifiers.control && event.text == "z" { + if Api.undo-enabled && event.modifiers.control && event.text == "z" { Api.undo(); return accept; - } else if Api.redo-enabled && event.modifiers.control && - ((Platform.os != OperatingSystemType.windows && event.text == "Z") || (Platform.os == OperatingSystemType.windows && event.text == "y")) { + } else if Api.redo-enabled && event.modifiers.control && ((Platform.os != OperatingSystemType.windows && event.text == "Z") || (Platform.os == OperatingSystemType.windows && event.text == "y")) { Api.redo(); return accept; } @@ -246,7 +246,7 @@ export component PreviewUi inherits Window { visible-component <=> root.visible-component; } - if properties-widget || outline-widget || data-widget : right-panel := Rectangle { + if properties-widget || outline-widget || data-widget: right-panel := Rectangle { width: EditorSizeSettings.property-bar-width + right-panel-border.width; right-panel-border := Rectangle { @@ -333,6 +333,7 @@ export component PreviewUi inherits Window { // StatusLine { } } + cp := ConsolePanel { y: parent.height - self.height - 1px; width: parent.width;