added palette global (#3984)

* Update docs/reference/src/language/builtins/globals.md

Co-authored-by: Simon Hausmann <simon.hausmann@slint.dev>

* Update docs/reference/src/language/builtins/globals.md

Co-authored-by: Simon Hausmann <simon.hausmann@slint.dev>

* Update docs/reference/src/language/builtins/globals.md

Co-authored-by: Simon Hausmann <simon.hausmann@slint.dev>

* Update docs/reference/src/language/builtins/globals.md

Co-authored-by: Simon Hausmann <simon.hausmann@slint.dev>

* Update docs/reference/src/language/builtins/globals.md

Co-authored-by: Simon Hausmann <simon.hausmann@slint.dev>


---------

Co-authored-by: Florian Blasius <florian.blasius@slint-ui.com>
Co-authored-by: Simon Hausmann <simon.hausmann@slint.dev>
Co-authored-by: Florian Blasius <flovansl@fedora.fritz.box>

CHANGELOG.md

@@ -100,6 +100,7 @@ All notable changes to this project are documented in this file.
  - Added `focus-changed-event` callback to `FocusScope`.
  - Added many new easing curves.
  - Added `Spinner`.
+ - Added `Palette` global.
 
 ### JavaScript
 

api/cpp/cbindgen.rs

@@ -730,6 +730,7 @@ fn gen_backend_qt(
         "NativeTabWidget",
         "NativeTab",
         "NativeStyleMetrics",
+        "NativePalette",
     ];
 
     config.export.include = items.iter().map(|x| x.to_string()).collect();
@@ -741,6 +742,11 @@ fn gen_backend_qt(
             .to_owned(),
     );
 
+    config.export.body.insert(
+        "NativePalette".to_owned(),
+        "    inline explicit NativePalette(void* = nullptr); inline ~NativePalette();".to_owned(),
+    );
+
     let mut crate_dir = root_dir.to_owned();
     crate_dir.extend(["internal", "backends", "qt"].iter());
 

api/cpp/include/slint.h

@@ -1241,6 +1241,16 @@ cbindgen_private::NativeStyleMetrics::~NativeStyleMetrics()
 {
     slint_native_style_metrics_deinit(this);
 }
+
+cbindgen_private::NativePalette::NativePalette(void *)
+{
+    slint_native_palette_init(this);
+}
+
+cbindgen_private::NativePalette::~NativePalette()
+{
+    slint_native_palette_deinit(this);
+}
 #endif // !defined(DOXYGEN)
 
 namespace private_api {

docs/reference/src/language/builtins/globals.md

@@ -1,6 +1,45 @@
 <!-- Copyright © SixtyFPS GmbH <info@slint.dev> ; SPDX-License-Identifier: MIT -->
 # Builtin Global Singletons
 
+## `Palette`
+
+Use `Palette` to create custom widgets that match the colors of
+the selected style e.g. fluent, cupertino, material, or qt.
+
+### Properties
+
+-   **`background`** (_out_ _brush_): Defines the default background brush. Use this if none of the more specialised background brushes apply.
+-   **`foreground`** (_out_ _brush_): Defines the foreground brush that is used for content that is displayed on `background` brush.
+-   **`alternate-background`** (_out_ _brush_): Defines an alternate background brush that is used for example for text input controls or panels like a side bar.
+-   **`alternate-foreground`** (_out_ _brush_): Defines the foreground brush that is used for content that is displayed on `alternate-background` brush.
+-   **`control-background`** (_out_ _brush_): Defines the default background brush for controls, such as push buttons, combo boxes, etc.
+-   **`control-foreground`** (_out_ _brush_): Defines the foreground brush that is used for content that is displayed on `control-background` brush.
+-   **`accent-background`** (_out_ _brush_): Defines the background brush for highlighted controls such as primary buttons.
+-   **`accent-foreground`** (_out_ _brush_): Defines the foreground brush that is used for content that is displayed on `accent-background` brush.
+-   **`selection-background`** (_out_ _brush_): Defines the background brush that is used to highlight a selection such as a text selection.
+-   **`selection-foreground`** (_out_ _brush_):  Defines the foreground brush that is used for content that is displayed on `selection-background` brush.
+-   **`border`** (_out_ _brush_): Defines the brush that is used for borders such as separators and widget borders.
+
+### Example
+
+```slint
+import { Palette, HorizontalBox } from "std-widgets.slint";
+
+export component MyCustomWidget {
+    in property <string> text <=> label.text;
+
+    Rectangle {
+        background: Palette.control-background;
+
+        HorizontalBox {
+            label := Text {
+                color: Palette.control-foreground;
+            }
+        }
+    }
+}
+```
+
 ## `TextInputInterface`
 
 The `TextInputInterface.text-input-focused` property can be used to find out if a `TextInput` element has the focus.

examples/gallery/ui/pages/easings_page.slint

@@ -2,10 +2,9 @@
 // SPDX-License-Identifier: MIT
 
 import { Page } from "page.slint";
-import { Button, HorizontalBox, Slider, ScrollView } from "std-widgets.slint";
+import { Button, HorizontalBox, Slider, ScrollView, Palette } from "std-widgets.slint";
 
 component EaseTest {
-
     in property <string> label: "None";
     in property <easing> easing: linear;
     in property <int> duration: 1000;
@@ -17,6 +16,7 @@ component EaseTest {
             ball.x = 0;
         }
     }
+
     HorizontalLayout {
         padding: 10px;
         spacing: 10px;
@@ -29,18 +29,20 @@ component EaseTest {
 
         VerticalLayout {
             alignment: center;
+
             container := Rectangle {
                 horizontal-stretch: 1;
                 height: 4px;
                 border-radius: 2px;
-                background: grey;
+                background: Palette.control-background;
 
                 ball := Rectangle {
                     x: 0px;
                     width: 16px;
                     height: 16px;
                     border-radius: 5px;
-                    background: blue;
+                    background: Palette.accent-background;
+
                     animate x { duration: duration * 1ms; easing: easing; }
                 }
             }

internal/backends/qt/build.rs

@@ -53,6 +53,7 @@ fn main() {
     println!("cargo:rerun-if-changed=qt_widgets/progress_indicator.rs");
     println!("cargo:rerun-if-changed=qt_widgets/spinbox.rs");
     println!("cargo:rerun-if-changed=qt_widgets/stylemetrics.rs");
+    println!("cargo:rerun-if-changed=qt_widgets/palette.rs");
     println!("cargo:rerun-if-changed=qt_widgets/tabwidget.rs");
     println!("cargo:rerun-if-changed=qt_widgets/tableheadersection.rs");
     println!("cargo:rerun-if-changed=qt_window.rs");

internal/backends/qt/lib.rs

@@ -75,7 +75,8 @@ pub type NativeWidgets =
 #[rustfmt::skip]
 pub type NativeGlobals =
     (qt_widgets::NativeStyleMetrics,
-        ());
+    (qt_widgets::NativePalette,
+        ()));
 
 #[cfg(no_qt)]
 mod native_style_metrics_stub {
@@ -95,6 +96,17 @@ mod native_style_metrics_stub {
     impl const_field_offset::PinnedDrop for NativeStyleMetrics {
         fn drop(self: Pin<&mut Self>) {}
     }
+
+    /// cbindgen:ignore
+    #[repr(C)]
+    #[derive(FieldOffsets, SlintElement)]
+    #[pin]
+    #[pin_drop]
+    pub struct NativePalette {}
+
+    impl const_field_offset::PinnedDrop for NativePalette {
+        fn drop(self: Pin<&mut Self>) {}
+    }
 }
 
 pub mod native_widgets {
@@ -103,6 +115,9 @@ pub mod native_widgets {
 
     #[cfg(no_qt)]
     pub use super::native_style_metrics_stub::NativeStyleMetrics;
+
+    #[cfg(no_qt)]
+    pub use super::native_style_metrics_stub::NativePalette;
 }
 
 #[cfg(no_qt)]

internal/backends/qt/qt_widgets.rs

@@ -321,5 +321,8 @@ pub use tabwidget::*;
 mod stylemetrics;
 pub use stylemetrics::*;
 
+mod palette;
+pub use palette::*;
+
 mod tableheadersection;
 pub use tableheadersection::*;

internal/backends/qt/qt_widgets/palette.rs

@@ -0,0 +1,184 @@
+// Copyright © SixtyFPS GmbH <info@slint.dev>
+// SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-Royalty-free-1.1 OR LicenseRef-Slint-commercial
+
+// cSpell: ignore deinit
+
+use i_slint_core::Brush;
+
+use super::*;
+
+cpp! {{
+namespace {
+struct PaletteStyleChangeListener : QWidget {
+    const void *qtStylePalette = nullptr;
+    PaletteStyleChangeListener(const void *qtStylePalette) : qtStylePalette(qtStylePalette) {}
+    bool event(QEvent *event) override {
+        auto ty = event->type();
+        if (ty == QEvent::StyleChange || ty == QEvent::PaletteChange || ty == QEvent::FontChange) {
+            rust!(Slint_qt_style_change_event [qtStylePalette: Pin<&NativePalette> as "const void*"] {
+                qtStylePalette.init_impl();
+            });
+        }
+        return QWidget::event(event);
+    }
+};
+}
+}}
+
+#[repr(C)]
+#[derive(FieldOffsets, SlintElement)]
+#[pin]
+#[pin_drop]
+pub struct NativePalette {
+    pub background: Property<Brush>,
+    pub foreground: Property<Brush>,
+    pub alternate_background: Property<Brush>,
+    pub alternate_foreground: Property<Brush>,
+    pub accent_background: Property<Brush>,
+    pub accent_foreground: Property<Brush>,
+    pub control_background: Property<Brush>,
+    pub control_foreground: Property<Brush>,
+    pub selection_background: Property<Brush>,
+    pub selection_foreground: Property<Brush>,
+    pub border: Property<Brush>,
+    pub style_change_listener: core::cell::Cell<*const u8>,
+}
+
+impl const_field_offset::PinnedDrop for NativePalette {
+    fn drop(self: Pin<&mut Self>) {
+        slint_native_palette_deinit(self);
+    }
+}
+
+impl NativePalette {
+    pub fn new() -> Pin<Rc<Self>> {
+        Rc::pin(NativePalette {
+            background: Default::default(),
+            alternate_background: Default::default(),
+            alternate_foreground: Default::default(),
+            foreground: Default::default(),
+            accent_background: Default::default(),
+            accent_foreground: Default::default(),
+            control_background: Default::default(),
+            control_foreground: Default::default(),
+            border: Default::default(),
+            selection_background: Default::default(),
+            selection_foreground: Default::default(),
+            style_change_listener: core::cell::Cell::new(core::ptr::null()),
+        })
+    }
+
+    pub fn init<T>(self: Pin<Rc<Self>>, _root: &T) {
+        self.as_ref().init_impl();
+    }
+
+    fn init_impl(self: Pin<&Self>) {
+        let wrong_thread = cpp!(unsafe [] -> bool as "bool" {
+            static QMutex mtx;
+            QMutexLocker locker(&mtx);
+            ensure_initialized();
+            return qApp->thread() != QThread::currentThread();
+        });
+        if wrong_thread {
+            return;
+        }
+
+        let background = cpp!(unsafe[] -> u32 as "QRgb" {
+            return qApp->palette().color(QPalette::Window).rgba();
+        });
+        let background = Color::from_argb_encoded(background);
+        self.background.set(Brush::from(background));
+
+        let alternate_background = cpp!(unsafe[] -> u32 as "QRgb" {
+            return qApp->palette().color(QPalette::Base).rgba();
+        });
+        let alternate_background = Color::from_argb_encoded(alternate_background);
+        self.alternate_background.set(Brush::from(alternate_background));
+
+        let alternate_foreground = cpp!(unsafe[] -> u32 as "QRgb" {
+            return qApp->palette().color(QPalette::Text).rgba();
+        });
+        let alternate_foreground = Color::from_argb_encoded(alternate_foreground);
+        self.alternate_foreground.set(Brush::from(alternate_foreground));
+
+        let foreground = cpp!(unsafe[] -> u32 as "QRgb" {
+            return qApp->palette().color(QPalette::WindowText).rgba();
+        });
+        let foreground = Color::from_argb_encoded(foreground);
+        self.foreground.set(Brush::from(foreground));
+
+        let accent_background = cpp!(unsafe[] -> u32 as "QRgb" {
+            return qApp->palette().color(QPalette::Link).rgba();
+        });
+        let accent_background = Color::from_argb_encoded(accent_background);
+        self.accent_background.set(Brush::from(accent_background));
+
+        let accent_foreground = cpp!(unsafe[] -> u32 as "QRgb" {
+            #if QT_VERSION >= QT_VERSION_CHECK(6, 6, 0)
+                return qApp->palette().color(QPalette::Accent).rgba();
+            #else
+                return qApp->palette().color(QPalette::Highlight).rgba();
+            #endif
+        });
+        let accent_foreground = Color::from_argb_encoded(accent_foreground);
+        self.accent_foreground.set(Brush::from(accent_foreground));
+
+        let control_background = cpp!(unsafe[] -> u32 as "QRgb" {
+            return qApp->palette().color(QPalette::Button).rgba();
+        });
+        let control_background = Color::from_argb_encoded(control_background);
+        self.control_background.set(Brush::from(control_background));
+
+        let control_foreground = cpp!(unsafe[] -> u32 as "QRgb" {
+            return qApp->palette().color(QPalette::ButtonText).rgba();
+        });
+        let control_foreground = Color::from_argb_encoded(control_foreground);
+        self.control_foreground.set(Brush::from(control_foreground));
+
+        let border = cpp!(unsafe[] -> u32 as "QRgb" {
+            return qApp->palette().color(QPalette::Midlight).rgba();
+        });
+        let border = Color::from_argb_encoded(border);
+        self.border.set(Brush::from(border));
+
+        let selection_background = cpp!(unsafe[] -> u32 as "QRgb" {
+            return qApp->palette().color(QPalette::HighlightedText).rgba();
+        });
+        let selection_background = Color::from_argb_encoded(selection_background);
+        self.selection_background.set(Brush::from(selection_background));
+
+        let selection_foreground = cpp!(unsafe[] -> u32 as "QRgb" {
+            return qApp->palette().color(QPalette::Text).rgba();
+        });
+        let selection_foreground = Color::from_argb_encoded(selection_foreground);
+        self.selection_foreground.set(Brush::from(selection_foreground));
+
+        if self.style_change_listener.get().is_null() {
+            self.style_change_listener.set(cpp!(unsafe [self as "void*"] -> *const u8 as "void*"{
+                return new PaletteStyleChangeListener(self);
+            }));
+        }
+    }
+}
+
+#[cfg(feature = "rtti")]
+impl i_slint_core::rtti::BuiltinGlobal for NativePalette {
+    fn new() -> Pin<Rc<Self>> {
+        let r = NativePalette::new();
+        r.as_ref().init_impl();
+        r
+    }
+}
+
+#[no_mangle]
+pub extern "C" fn slint_native_palette_init(self_: Pin<&NativePalette>) {
+    self_.style_change_listener.set(core::ptr::null()); // because the C++ code don't initialize it
+    self_.init_impl();
+}
+
+#[no_mangle]
+pub extern "C" fn slint_native_palette_deinit(self_: Pin<&mut NativePalette>) {
+    let scl = self_.style_change_listener.get();
+    cpp!(unsafe [scl as "PaletteStyleChangeListener*"] { delete scl; });
+    self_.style_change_listener.set(core::ptr::null());
+}

internal/compiler/builtins.slint

@@ -539,3 +539,20 @@ export global NativeStyleMetrics {
     //-is_non_item_type
     //-is_internal
 }
+
+export global NativePalette {
+    out property <brush> background;
+    out property <brush> foreground;
+    out property <brush> alternate-background;
+    out property <brush> alternate-foreground;
+    out property <brush> control-background;
+    out property <brush> control-foreground;
+    out property <brush> accent-background;
+    out property <brush> accent-foreground;
+    out property <brush> selection-background;
+    out property <brush> selection-foreground;
+    out property <brush> border;
+
+    //-is_non_item_type
+    //-is_internal
+}

internal/compiler/widgets/cupertino-base/button.slint

@@ -16,8 +16,8 @@ export component Button {
 
     callback clicked;
 
-    private property <brush> background: primary && root.enabled ? CupertinoPalette.accent : CupertinoPalette.surface;
-    private property <brush> text-color: primary && root.enabled ? CupertinoPalette.on-accent : CupertinoPalette.on-surface;
+    private property <brush> background: primary && root.enabled ? CupertinoPalette.accent-background : CupertinoPalette.control-background;
+    private property <brush> text-color: primary && root.enabled ? CupertinoPalette.accent-foreground : CupertinoPalette.control-foreground;
 
     min-width: max(20px, i-layout.min-width);
     min-height: max(20px, i-layout.min-height);
@@ -30,13 +30,13 @@ export component Button {
     states [
         disabled when !i-touch-area.enabled : {
             root.text-color: CupertinoPalette.foreground-secondary;
-            root.background: CupertinoPalette.surface-quaternary;
+            root.background: CupertinoPalette.quaternary-control-background;
         }
         pressed when root.pressed : {
-            root.background: root.primary ? CupertinoPalette.accent-secondary : CupertinoPalette.surface-secondary;
+            root.background: root.primary ? CupertinoPalette.secondary-accent-background : CupertinoPalette.secondary-control-background;
         }
         checked when root.checked : {
-            root.text-color: CupertinoPalette.accent-secondary;
+            root.text-color: CupertinoPalette.secondary-accent-background;
         }
     ]
 

internal/compiler/widgets/cupertino-base/checkbox.slint

@@ -12,8 +12,8 @@ export component CheckBox {
 
     callback toggled;
 
-    private property <brush> background: checked && root.enabled ? CupertinoPalette.accent : CupertinoPalette.surface;
-    private property <brush> icon-color: CupertinoPalette.on-accent;
+    private property <brush> background: checked && root.enabled ? CupertinoPalette.accent-background : CupertinoPalette.control-background;
+    private property <brush> icon-color: CupertinoPalette.accent-foreground;
 
     min-height: max(16px, i-layout.min-height);
     accessible-checkable: true;
@@ -27,7 +27,7 @@ export component CheckBox {
             icon-color: CupertinoPalette.foreground;
         }
         pressed when i-touch-area.pressed : {
-            root.background: root.checked ? CupertinoPalette.accent-secondary : CupertinoPalette.surface-secondary;
+            root.background: root.checked ? CupertinoPalette.secondary-accent-background : CupertinoPalette.secondary-control-background;
         }
     ]
 

internal/compiler/widgets/cupertino-base/combobox.slint

@@ -14,7 +14,7 @@ export component ComboBox {
 
     callback selected <=> i-base.selected;
 
-    private property <brush> background: CupertinoPalette.surface;
+    private property <brush> background: CupertinoPalette.control-background;
 
     min-width: max(160px, i-layout.min-width);
     min-height: max(22px, i-layout.min-height);
@@ -27,10 +27,10 @@ export component ComboBox {
             i-text.color: CupertinoPalette.foreground-secondary;
             i-top-icon.colorize: CupertinoPalette.foreground-secondary;
             i-bottom-icon.colorize: CupertinoPalette.foreground-secondary;
-            root.background: CupertinoPalette.surface-tertiary;
+            root.background: CupertinoPalette.tertiary-control-background;
         }
         pressed when i-base.pressed : {
-            root.background: CupertinoPalette.surface-secondary;
+            root.background: CupertinoPalette.secondary-control-background;
         }
     ]
 
@@ -99,7 +99,7 @@ export component ComboBox {
                 drop-shadow-color: #00000066;
                 drop-shadow-offset-y: 0.5px;
                 border-radius: 4px;
-                background: CupertinoPalette.accent;
+                background: CupertinoPalette.accent-background;
 
                 Rectangle {
                     drop-shadow-blur: 2px;
@@ -130,13 +130,13 @@ export component ComboBox {
 
                 i-top-icon := Image {
                     x: (parent.width - self.width) / 2;
-                    colorize: CupertinoPalette.on-accent;
+                    colorize: CupertinoPalette.accent-foreground;
                     source: Icons.chevron-up;
                 }
 
                 i-bottom-icon := Image {
                     x: (parent.width - self.width) / 2;
-                    colorize: CupertinoPalette.on-accent;
+                    colorize: CupertinoPalette.accent-foreground;
                     source: Icons.chevron-down;
                 }
             }

internal/compiler/widgets/cupertino-base/components.slint

@@ -6,7 +6,7 @@ import { CupertinoPalette, CupertinoFontSettings, Icons } from "styling.slint";
 export component FocusBorder inherits Rectangle {
     in property <bool> has-focus;
 
-    background: CupertinoPalette.accent-tertiary;
+    background: CupertinoPalette.tertiary-accent-background;
     opacity: 0;
 
     animate opacity { duration: 150ms; }
@@ -61,12 +61,12 @@ export component ListItem {
 
     states [
         has-focus when root.has-focus : {
-            i-background.background: CupertinoPalette.accent-tertiary;
+            i-background.background: CupertinoPalette.tertiary-accent-background;
         }
         hover when root.has-hover : {
-            i-background.background: CupertinoPalette.accent;
-            i-text.color: CupertinoPalette.on-surface;
-            i-icon.colorize: CupertinoPalette.on-surface;
+            i-background.background: CupertinoPalette.accent-background;
+            i-text.color: CupertinoPalette.control-foreground;
+            i-icon.colorize: CupertinoPalette.control-foreground;
         }
     ]
 

internal/compiler/widgets/cupertino-base/groupbox.slint

@@ -22,7 +22,7 @@ export component GroupBox {
         Rectangle {
             vertical-stretch: 1;
             border-radius: 6px;
-            background: CupertinoPalette.background-alt;
+            background: CupertinoPalette.alternate-background;
             border-width: 1px;
             border-color: CupertinoPalette.border;
 

internal/compiler/widgets/cupertino-base/lineedit.slint

@@ -48,10 +48,10 @@ export component LineEdit {
         disabled when !root.enabled : {
             i-base.text-color: CupertinoPalette.foreground-secondary;
             i-base.placeholder-color: CupertinoPalette.foreground-secondary;
-            i-background.background: CupertinoPalette.surface-tertiary;
+            i-background.background: CupertinoPalette.tertiary-control-background;
         }
         focused when root.has-focus : {
-            i-background.background: CupertinoPalette.surface;
+            i-background.background: CupertinoPalette.control-background;
         }
     ]
 
@@ -64,7 +64,7 @@ export component LineEdit {
     }
 
     i-background := Rectangle {
-        background: CupertinoPalette.background-alt;
+        background: CupertinoPalette.alternate-background;
         border-color: CupertinoPalette.border;
         border-width: 1px;
     }
@@ -76,8 +76,8 @@ export component LineEdit {
         i-base := LineEditBase {
             font-size: CupertinoFontSettings.body.font-size;
             font-weight: CupertinoFontSettings.body.font-weight;
-            selection-background-color: CupertinoPalette.accent-quaternary;
-            selection-foreground-color: self.text-color;
+            selection-background-color: CupertinoPalette.selection-background;
+            selection-foreground-color: CupertinoPalette.selection-foreground;
             text-color: CupertinoPalette.foreground;
             margin: i-layout.padding-left + i-layout.padding-right;
             placeholder-color: CupertinoPalette.foreground-secondary;

internal/compiler/widgets/cupertino-base/progressindicator.slint

@@ -19,7 +19,7 @@ export component ProgressIndicator {
 
         i-rail := Rectangle {
             border-radius: parent.border-radius;
-            background: CupertinoPalette.surface-alt;
+            background: CupertinoPalette.alternate-control-background;
             border-width: 0.5px;
             border-color: CupertinoPalette.border;
             clip: true;
@@ -36,7 +36,7 @@ export component ProgressIndicator {
             height: 100%;
             x: !root.indeterminate ? 0px : -parent.width + (parent.width * mod(animation-tick(), 2s) / 1s);
             border-radius: parent.border-radius;
-            background: CupertinoPalette.accent;
+            background: CupertinoPalette.accent-background;
         }
     }
 }

internal/compiler/widgets/cupertino-base/slider.slint

@@ -36,7 +36,7 @@ export component Slider {
     i-rail := Rectangle {
         width: vertical ? 4px : parent.width;
         height: vertical ? parent.height : 4px;
-        background: CupertinoPalette.surface-alt;
+        background: CupertinoPalette.alternate-control-background;
         border-radius: 2px;
 
         Rectangle {
@@ -51,7 +51,7 @@ export component Slider {
         y: vertical ? 0 : (parent.height - self.height) / 2;
         width: vertical ? i-rail.width : i-thumb.x + (i-thumb.width / 2);
         height: vertical ? i-thumb.y + (i-thumb.height / 2) : i-rail.height;
-        background: CupertinoPalette.accent;
+        background: CupertinoPalette.accent-background;
         border-radius: i-rail.border-radius;
     }
 
@@ -61,7 +61,7 @@ export component Slider {
         width: 20px;
         height: self.width;
         border-radius: 10px;
-        background: CupertinoPalette.surface-thumb;
+        background: CupertinoPalette.control-background-thumb;
         drop-shadow-blur: 1px;
         drop-shadow-offset-y: 0.25px;
         drop-shadow-color: #0000003D;

internal/compiler/widgets/cupertino-base/spinbox.slint

@@ -11,8 +11,8 @@ component SpinBoxButton {
 
     callback clicked <=> i-touch-area.clicked;
 
-    private property <brush> background: CupertinoPalette.accent;
-    private property <brush> icon-color: CupertinoPalette.on-accent;
+    private property <brush> background: CupertinoPalette.accent-background;
+    private property <brush> icon-color: CupertinoPalette.accent-foreground;
 
     min-width: 16px;
     horizontal-stretch: 0;
@@ -23,7 +23,7 @@ component SpinBoxButton {
             icon-color: CupertinoPalette.foreground-secondary;
         }
         pressed when i-touch-area.pressed : {
-            root.background: CupertinoPalette.accent-secondary;
+            root.background: CupertinoPalette.secondary-accent-background;
         }
     ]
 
@@ -88,7 +88,7 @@ export component SpinBox {
 
     callback edited(int /* value */);
 
-    private property <brush> background: CupertinoPalette.surface;
+    private property <brush> background: CupertinoPalette.control-background;
 
     min-width: 128px;
     min-height: max(22px, i-layout.min-height);
@@ -103,7 +103,7 @@ export component SpinBox {
     states [
         disabled when !root.enabled : {
             i-base.color: CupertinoPalette.foreground-secondary;
-            root.background: CupertinoPalette.surface-tertiary;
+            root.background: CupertinoPalette.tertiary-control-background;
         }
     ]
 
@@ -149,7 +149,7 @@ export component SpinBox {
                 color: CupertinoPalette.foreground;
                 font-size: CupertinoFontSettings.body.font-size;
                 font-weight: CupertinoFontSettings.body.font-weight;
-                selection-background-color: CupertinoPalette.accent-quaternary;
+                selection-background-color: CupertinoPalette.selection-background;
                 selection-foreground-color: self.color;
             }
         }

internal/compiler/widgets/cupertino-base/spinner.slint

@@ -19,6 +19,6 @@ export component Spinner {
         width: 100%;
         height: 100%;
         stroke-width: 2px;
-        stroke: CupertinoPalette.accent;
+        stroke: CupertinoPalette.accent-background;
     }
 }

internal/compiler/widgets/cupertino-base/std-widgets-base.slint

@@ -5,7 +5,7 @@
 
 import { AboutSlint } from "../common/common.slint";
 import { StandardButton } from "../common/standardbutton.slint";
-import { StyleMetrics, ScrollView, Button } from "std-widgets-impl.slint";
+import { StyleMetrics, ScrollView, Button, Palette } from "std-widgets-impl.slint";
 
 import { CheckBox } from "checkbox.slint";
 export { CheckBox }
@@ -46,6 +46,6 @@ export { Switch }
 import { TextEdit } from "textedit.slint";
 export { TextEdit }
 
-export { StyleMetrics, ScrollView, Button, StandardButton, AboutSlint }
+export { StyleMetrics, ScrollView, Button, StandardButton, AboutSlint, Palette }
 
 export * from "tableview.slint";

internal/compiler/widgets/cupertino-base/std-widgets-impl.slint

@@ -20,9 +20,23 @@ export global StyleMetrics  {
     out property <length> text-cursor-width: 1px;
     out property <color> window-background: CupertinoPalette.background;
     out property <color> default-text-color: CupertinoPalette.foreground;
-    out property <color> textedit-background: CupertinoPalette.background-alt;
+    out property <color> textedit-background: CupertinoPalette.alternate-background;
     out property <color> textedit-text-color: CupertinoPalette.foreground;
-    out property <color> textedit-background-disabled: CupertinoPalette.surface-tertiary;
+    out property <color> textedit-background-disabled: CupertinoPalette.tertiary-control-background;
     out property <color> textedit-text-color-disabled: CupertinoPalette.foreground-secondary;
     out property <bool> dark-color-scheme: CupertinoPalette.dark-color-scheme;
 }
+
+export global Palette {
+    out property <brush> background: CupertinoPalette.background;
+    out property <brush> foreground: CupertinoPalette.foreground;
+    out property <brush> alternate-background: CupertinoPalette.alternate-background;
+    out property <brush> alternate-foreground: CupertinoPalette.alternate-foreground;
+    out property <brush> control-background: CupertinoPalette.control-background;
+    out property <brush> control-foreground: CupertinoPalette.control-foreground;
+    out property <brush> accent-background: CupertinoPalette.accent-background;
+    out property <brush> accent-foreground: CupertinoPalette.accent-foreground;
+    out property <brush> selection-background: CupertinoPalette.selection-background;
+    out property <brush> selection-foreground: CupertinoPalette.selection-foreground;
+    out property <brush> border: CupertinoPalette.border;
+}

internal/compiler/widgets/cupertino-base/styling.slint

@@ -30,31 +30,33 @@ export global CupertinoPalette {
 
     // base palette
     out property <brush> background: dark-color-scheme ? #282828 : #ffffff;
-    out property <brush> background-alt: dark-color-scheme ? #2c2c2c : #00000005;
     out property <brush> foreground: dark-color-scheme ? #ffffff : #000000;
-    out property <brush> accent: dark-color-scheme ? #0055d1 : #007AFF;
-    out property <brush> on-accent: #f0f0f0;
-    out property <brush> surface: dark-color-scheme ? #616161 : #ffffff;
-    out property <brush> on-surface: dark-color-scheme ? #ffffff : #000000;
+    out property <brush> alternate-background: dark-color-scheme ? #2c2c2c : #00000005;
+    out property <brush> alternate-foreground: dark-color-scheme ? #ffffff : #000000;
+    out property <brush> control-background: dark-color-scheme ? #616161 : #ffffff;
+    out property <brush> control-foreground: dark-color-scheme ? #ffffff : #000000;
+    out property <brush> accent-background: dark-color-scheme ? #0055d1 : #007AFF;
+    out property <brush> accent-foreground: #f0f0f0;
+    out property <brush> selection-background: dark-color-scheme ? #0055d14D : #007AFF4D;
+    out property <brush> selection-foreground: dark-color-scheme ? #ffffff : #000000;
     out property <brush> border: dark-color-scheme ? #ffffff26 : #00000026;
 
     // additional palette
-    out property <brush> background-tertiary: dark-color-scheme ? #1e1e1e : #ffffff;
-    out property <brush> background-quaternary: dark-color-scheme ? #1c1c1c : #f0f0f0;
-    out property <brush> accent-secondary: dark-color-scheme ? #2076ee : #0063ea;
-    out property <brush> accent-tertiary: dark-color-scheme ? #487aff : #66A1E3;
-    out property <brush> accent-quaternary: dark-color-scheme ? #0055d14D : #007AFF4D;
+    out property <brush> tertiary-background: dark-color-scheme ? #1e1e1e : #ffffff;
+    out property <brush> quaternary-background: dark-color-scheme ? #1c1c1c : #f0f0f0;
+    out property <brush> secondary-accent-background: dark-color-scheme ? #2076ee : #0063ea;
+    out property <brush> tertiary-accent-background: dark-color-scheme ? #487aff : #66A1E3;
     out property <brush> foreground-neg: dark-color-scheme ? #000000 : #ffffff;
     out property <brush> foreground-secondary: dark-color-scheme ? #ffffff40 : #00000040;
-    out property <brush> surface-secondary: dark-color-scheme ? #7a7a7a : #f0f0f0;
-    out property <brush> surface-tertiary: dark-color-scheme ? #616161B3 : #ffffffB3;
-    out property <brush> surface-quaternary: dark-color-scheme ? #61616180 : #ffffff80;
-    out property <brush> surface-alt: dark-color-scheme ? #414141 : #dadada;
+    out property <brush> secondary-control-background: dark-color-scheme ? #7a7a7a : #f0f0f0;
+    out property <brush> tertiary-control-background: dark-color-scheme ? #616161B3 : #ffffffB3;
+    out property <brush> quaternary-control-background: dark-color-scheme ? #61616180 : #ffffff80;
+    out property <brush> alternate-control-background: dark-color-scheme ? #414141 : #dadada;
     out property <brush> hover: dark-color-scheme ? #2e2e2e : #e3e3e3;
     out property <brush> pressed: dark-color-scheme ? #b6b6b6 : #f0f0f0;
     out property <brush> popup-border: dark-color-scheme ? #525252 :#0000000A;
     out property <brush> decent-border: dark-color-scheme ? #ffffff14 : #00000014;
-    out property <brush> surface-thumb: dark-color-scheme ? #cacaca : #ffffff;
+    out property <brush> control-background-thumb: dark-color-scheme ? #cacaca : #ffffff;
     out property <brush> separator: dark-color-scheme ? #000000 : #d9d9d9;
 
     // FIXME: dark color

internal/compiler/widgets/cupertino-base/switch.slint

@@ -12,7 +12,7 @@ export component Switch {
 
     callback toggled;
 
-    private property <brush> background: checked && root.enabled ? CupertinoPalette.accent : CupertinoPalette.surface-alt;
+    private property <brush> background: checked && root.enabled ? CupertinoPalette.accent-background : CupertinoPalette.alternate-control-background;
     private property <color> text-color: CupertinoPalette.foreground;
 
     function toggle-checked() {
@@ -39,10 +39,10 @@ export component Switch {
             root.opacity: 0.5;
         }
         pressed when i-touch-area.pressed : {
-            root.background: root.checked ? CupertinoPalette.accent-secondary : CupertinoPalette.surface-secondary;
+            root.background: root.checked ? CupertinoPalette.secondary-accent-background : CupertinoPalette.secondary-control-background;
         }
         selected when root.checked : {
-            i-rail.background: CupertinoPalette.accent;
+            i-rail.background: CupertinoPalette.accent-background;
         }
     ]
 
@@ -79,7 +79,7 @@ export component Switch {
                     height: parent.height - 2px;
                     width: self.height;
                     border-radius: self.height / 2;
-                    background: CupertinoPalette.surface-thumb;
+                    background: CupertinoPalette.control-background-thumb;
                     drop-shadow-blur: 0.5px;
                     drop-shadow-offset-y: 0.25px;
                     drop-shadow-color: #0000001F;

internal/compiler/widgets/cupertino-base/tableview.slint

@@ -15,7 +15,7 @@ component TableViewColumn inherits Rectangle {
 
     states [
         pressed when i-touch-area.pressed : {
-            background: CupertinoPalette.surface-secondary;
+            background: CupertinoPalette.secondary-control-background;
         }
     ]
 
@@ -98,7 +98,7 @@ component TableViewRow inherits Rectangle {
 
     states [
         selected when root.selected : {
-            i-background.background: CupertinoPalette.accent;
+            i-background.background: CupertinoPalette.accent-background;
         }
     ]
 
@@ -112,7 +112,7 @@ component TableViewRow inherits Rectangle {
     }
 
     i-background := Rectangle {
-        background: root.even ? CupertinoPalette.background-tertiary : CupertinoPalette.background-alt;
+        background: root.even ? CupertinoPalette.tertiary-background : CupertinoPalette.alternate-background;
     }
 
     i-layout := HorizontalLayout {
@@ -179,7 +179,7 @@ export component StandardTableView {
             clip: true;
             vertical-stretch: 0;
             min-height: i-header-layout.min-height;
-            background: CupertinoPalette.background-tertiary;
+            background: CupertinoPalette.tertiary-background;
 
             i-header-layout := HorizontalLayout {
                 width: max(self.preferred-width, parent.width);

internal/compiler/widgets/cupertino-base/tabwidget.slint

@@ -50,7 +50,7 @@ export component TabImpl inherits Rectangle {
         width: 100%;
         height: 100%;
         background: root.is-current ? CupertinoPalette.background :
-            i-touch-area.has-hover ? CupertinoPalette.hover : CupertinoPalette.background-quaternary;
+            i-touch-area.has-hover ? CupertinoPalette.hover : CupertinoPalette.quaternary-background;
 
         animate background { duration: 150ms; easing: linear; }
     }

internal/compiler/widgets/cupertino-base/textedit.slint

@@ -105,10 +105,10 @@ export component TextEdit {
     states [
         disabled when !root.enabled : {
             i-text-input.color: CupertinoPalette.foreground-secondary;
-            i-background.background: CupertinoPalette.surface-tertiary;
+            i-background.background: CupertinoPalette.tertiary-control-background;
         }
         focused when root.has-focus : {
-            i-background.background: CupertinoPalette.surface;
+            i-background.background: CupertinoPalette.control-background;
         }
     ]
 
@@ -121,7 +121,7 @@ export component TextEdit {
     }
 
     i-background := Rectangle {
-        background: CupertinoPalette.background-alt;
+        background: CupertinoPalette.alternate-background;
         border-color: CupertinoPalette.border;
         border-width: 1px;
     }
@@ -139,7 +139,7 @@ export component TextEdit {
             color: CupertinoPalette.foreground;
             font-size: CupertinoFontSettings.body.font-size;
             font-weight: CupertinoFontSettings.body.font-weight;
-            selection-background-color: CupertinoPalette.accent-quaternary;
+            selection-background-color: CupertinoPalette.selection-background;
             selection-foreground-color: self.color;
             single-line: false;
             wrap: word-wrap;

internal/compiler/widgets/cupertino-dark/std-widgets-impl.slint

@@ -1,5 +1,5 @@
 // Copyright © SixtyFPS GmbH <info@slint.dev>
 // SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-Royalty-free-1.1 OR LicenseRef-Slint-commercial
 
-import { StyleMetrics, ScrollView, Button, ListItem } from "../cupertino-base/std-widgets-impl.slint";
-export { StyleMetrics, ScrollView, Button, ListItem }
+import { StyleMetrics, ScrollView, Button, ListItem, Palette } from "../cupertino-base/std-widgets-impl.slint";
+export { StyleMetrics, ScrollView, Button, ListItem, Palette }

internal/compiler/widgets/cupertino-light/std-widgets-impl.slint

@@ -1,5 +1,5 @@
 // Copyright © SixtyFPS GmbH <info@slint.dev>
 // SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-Royalty-free-1.1 OR LicenseRef-Slint-commercial
 
-import { StyleMetrics, ScrollView, Button, ListItem } from "../cupertino-base/std-widgets-impl.slint";
-export { StyleMetrics, ScrollView, Button, ListItem }
+import { StyleMetrics, ScrollView, Button, ListItem, Palette } from "../cupertino-base/std-widgets-impl.slint";
+export { StyleMetrics, ScrollView, Button, ListItem, Palette }

internal/compiler/widgets/cupertino/std-widgets-impl.slint

@@ -1,5 +1,5 @@
 // Copyright © SixtyFPS GmbH <info@slint.dev>
 // SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-Royalty-free-1.1 OR LicenseRef-Slint-commercial
 
-import { StyleMetrics, ScrollView, Button, ListItem } from "../cupertino-base/std-widgets-impl.slint";
-export { StyleMetrics, ScrollView, Button, ListItem }
+import { StyleMetrics, ScrollView, Button, ListItem, Palette } from "../cupertino-base/std-widgets-impl.slint";
+export { StyleMetrics, ScrollView, Button, ListItem, Palette }

internal/compiler/widgets/fluent-base/button.slint

@@ -16,7 +16,7 @@ export component Button {
 
     callback clicked;
 
-    private property <brush> text-color: primary || checked ? FluentPalette.on-accent : FluentPalette.on-surface;
+    private property <brush> text-color: primary || checked ? FluentPalette.accent-foreground : FluentPalette.control-foreground;
 
     min-width: max(32px, i-layout.min-width);
     min-height: max(32px, i-layout.min-height);
@@ -30,26 +30,26 @@ export component Button {
         disabled when !root.enabled : {
             i-background.background: root.primary || root.checked ? FluentPalette.accent-disabled : FluentPalette.control-disabled;
             i-border.border-color: root.primary || root.checked ? transparent : FluentPalette.border;
-            root.text-color: root.primary || root.checked ? FluentPalette.text-on-accent-disabled : FluentPalette.text-disabled;
+            root.text-color: root.primary || root.checked ? FluentPalette.text-accent-foreground-disabled : FluentPalette.text-disabled;
         }
         pressed when root.pressed : {
-            i-background.background: root.primary || root.checked ? FluentPalette.accent-tertiary : FluentPalette.control-tertiary;
+            i-background.background: root.primary || root.checked ? FluentPalette.tertiary-accent-background : FluentPalette.control-tertiary;
             i-border.border-color: FluentPalette.border;
-            root.text-color: root.primary || root.checked ? FluentPalette.text-on-accent-secondary : FluentPalette.text-secondary;
+            root.text-color: root.primary || root.checked ? FluentPalette.text-accent-foreground-secondary : FluentPalette.text-secondary;
         }
         hover when i-touch-area.has-hover : {
-            i-background.background: root.primary || root.checked ? FluentPalette.accent-secondary : FluentPalette.control-secondary;
+            i-background.background: root.primary || root.checked ? FluentPalette.secondary-accent-background : FluentPalette.control-secondary;
         }
         checked when root.checked : {
-            i-background.background: FluentPalette.accent;
+            i-background.background: FluentPalette.accent-background;
             i-border.border-color: FluentPalette.accent-control-border;
-            root.text-color: FluentPalette.on-accent;
+            root.text-color: FluentPalette.accent-foreground;
         }
     ]
 
     i-background := Rectangle {
         border-radius: 4px;
-        background: root.primary ? FluentPalette.accent : FluentPalette.surface;
+        background: root.primary ? FluentPalette.accent-background : FluentPalette.control-background;
 
         animate background, border-color { duration: 150ms; }
 

internal/compiler/widgets/fluent-base/checkbox.slint

@@ -24,19 +24,19 @@ export component CheckBox {
         disabled when !root.enabled : {
             i-border.border-color: FluentPalette.control-strong-stroke-disabled;
             i-background.background: root.checked ? FluentPalette.accent-disabled : FluentPalette.control-alt-disabled;
-            i-icon.colorize: FluentPalette.text-on-accent-disabled;
+            i-icon.colorize: FluentPalette.text-accent-foreground-disabled;
             root.text-color: FluentPalette.text-disabled;
         }
         pressed when i-touch-area.pressed : {
             i-border.border-color: FluentPalette.control-strong-stroke-disabled;
-            i-background.background: root.checked ? FluentPalette.accent-tertiary : FluentPalette.control-alt-quartiary;
-            i-icon.colorize: FluentPalette.text-on-accent-secondary;
+            i-background.background: root.checked ? FluentPalette.tertiary-accent-background : FluentPalette.control-alt-quartiary;
+            i-icon.colorize: FluentPalette.text-accent-foreground-secondary;
         }
         hover when i-touch-area.has-hover : {
-            i-background.background: root.checked ?  FluentPalette.accent-secondary : FluentPalette.control-alt-tertiary;
+            i-background.background: root.checked ?  FluentPalette.secondary-accent-background : FluentPalette.control-alt-tertiary;
         }
         checked when root.checked && root.enabled : {
-            i-background.background: FluentPalette.accent;
+            i-background.background: FluentPalette.accent-background;
         }
     ]
 
@@ -66,7 +66,7 @@ export component CheckBox {
                 image-fit: contain;
                 visible: root.checked;
                 source: Icons.check-mark;
-                colorize: FluentPalette.on-accent;
+                colorize: FluentPalette.accent-foreground;
                 width: 12px;
 
                 animate colorize { duration: 150ms; }

internal/compiler/widgets/fluent-base/combobox.slint

@@ -49,7 +49,7 @@ export component ComboBox {
 
     i-background := Rectangle {
         border-radius: 3px;
-        background: FluentPalette.surface;
+        background: FluentPalette.control-background;
         border-width: 1px;
         border-color: FluentPalette.control-border;
 
@@ -65,7 +65,7 @@ export component ComboBox {
                 vertical-alignment: center;
                 font-size: FluentFontSettings.body.font-size;
                 font-weight: FluentFontSettings.body.font-weight;
-                color: FluentPalette.on-surface;
+                color: FluentPalette.control-foreground;
                 text: root.current-value;
             }
 

internal/compiler/widgets/fluent-base/components.slint

@@ -20,7 +20,7 @@ export component FocusBorder inherits Rectangle {
 
 export component MenuBorder inherits Rectangle {
     border-radius: 7px;
-    background: FluentPalette.background-alt;
+    background: FluentPalette.alternate-background;
     drop-shadow-blur: 16px;
     drop-shadow-offset-y: 8px;
     drop-shadow-color: FluentPalette.shadow;
@@ -28,7 +28,7 @@ export component MenuBorder inherits Rectangle {
     Rectangle {
         border-width: 1px;
         border-radius: parent.border-radius;
-        border-color: FluentPalette.surface-stroke-flyout;
+        border-color: FluentPalette.control-background-stroke-flyout;
     }
 }
 
@@ -81,7 +81,7 @@ export component ListItem {
 
             i-text := Text {
                 text: root.item.text;
-                color: FluentPalette.on-surface;
+                color: FluentPalette.control-foreground;
                 font-size: FluentFontSettings.body.font-size;
                 font-weight: FluentFontSettings.body.font-weight;
                 vertical-alignment: center;
@@ -97,7 +97,7 @@ export component ListItem {
             y: (parent.height - self.height) / 2;
             width: 3px;
             height: 0px;
-            background: FluentPalette.accent;
+            background: FluentPalette.accent-background;
             border-radius: 2px;
 
             animate height { duration: 150ms; easing: ease-out; }

internal/compiler/widgets/fluent-base/groupbox.slint

@@ -14,7 +14,7 @@ export component GroupBox {
 
         label := Text {
             vertical-stretch: 0;
-            color: !root.enabled ? FluentPalette.text-disabled : FluentPalette.on-surface;
+            color: !root.enabled ? FluentPalette.text-disabled : FluentPalette.control-foreground;
             font-size: FluentFontSettings.body-strong.font-size;
             font-weight: FluentFontSettings.body-strong.font-weight;
         }

internal/compiler/widgets/fluent-base/lineedit.slint

@@ -48,20 +48,20 @@ export component LineEdit {
             i-background.background: FluentPalette.control-disabled;
             i-background.border-color: FluentPalette.border;
             i-base.text-color: FluentPalette.text-disabled;
-            i-base.selection-foreground-color: FluentPalette.text-on-accent-disabled;
+            i-base.selection-foreground-color: FluentPalette.text-accent-foreground-disabled;
             i-base.placeholder-color: FluentPalette.text-disabled;
         }
         focused when root.has-focus : {
             i-background.background: FluentPalette.control-input-active;
             i-background.border-color: FluentPalette.border;
-            i-focus-border.background: FluentPalette.accent;
+            i-focus-border.background: FluentPalette.accent-background;
             i-base.placeholder-color: FluentPalette.text-tertiary;
         }
     ]
 
     i-background := Rectangle {
         border-radius: 4px;
-        background: FluentPalette.surface;
+        background: FluentPalette.control-background;
         border-width: 1px;
         border-color: FluentPalette.text-control-border;
 
@@ -72,8 +72,8 @@ export component LineEdit {
             i-base := LineEditBase {
                 font-size: FluentFontSettings.body.font-size;
                 font-weight: FluentFontSettings.body.font-weight;
-                selection-background-color: FluentPalette.accent-selected-text;
-                selection-foreground-color: FluentPalette.on-accent;
+                selection-background-color: FluentPalette.selection-background;
+                selection-foreground-color: FluentPalette.accent-foreground;
                 text-color: FluentPalette.foreground;
                 placeholder-color: FluentPalette.text-secondary;
                 margin: i-layout.padding-left + i-layout.padding-right;

internal/compiler/widgets/fluent-base/progressindicator.slint

@@ -27,7 +27,7 @@ export component ProgressIndicator {
             height: 100%;
             x: !root.indeterminate ? 0px : -parent.width + (parent.width * mod(animation-tick(), 2s) / 1s);
             border-radius: 3px;
-            background: FluentPalette.accent;
+            background: FluentPalette.accent-background;
         }
     }
 }

internal/compiler/widgets/fluent-base/scrollview.slint

@@ -49,7 +49,7 @@ component ScrollBar inherits Rectangle {
 
     states [
         hover when i-touch-area.has-hover || i-down-scroll-button.has-hover || i-up-scroll-button.has-hover : {
-            root.background: FluentPalette.background-alt;
+            root.background: FluentPalette.alternate-background;
             root.size: 6px;
             i-up-scroll-button.opacity: 1;
             i-down-scroll-button.opacity: 1;

internal/compiler/widgets/fluent-base/slider.slint

@@ -33,12 +33,12 @@ export component Slider {
         }
         pressed when ( i-touch-area.pressed &&  i-touch-area.has-hover) || i-focus-scope.has-focus : {
             i-thumb-inner.width: 10px;
-            i-thumb-inner.background: FluentPalette.accent-tertiary;
+            i-thumb-inner.background: FluentPalette.tertiary-accent-background;
             i-thumb.border-color: FluentPalette.border;
         }
         hover when i-touch-area.has-hover : {
             i-thumb-inner.width: 14px;
-            i-thumb-inner.background: FluentPalette.accent-secondary;
+            i-thumb-inner.background: FluentPalette.secondary-accent-background;
         }
     ]
 
@@ -54,7 +54,7 @@ export component Slider {
         y: vertical ? 0 : (parent.height - self.height) / 2;
         width: vertical ? i-rail.width : i-thumb.x + (i-thumb.width / 2);
         height: vertical ? i-thumb.y + (i-thumb.height / 2) : i-rail.height;
-        background: FluentPalette.accent;
+        background: FluentPalette.accent-background;
         border-radius: i-rail.border-radius;
     }
 
@@ -80,7 +80,7 @@ export component Slider {
             width: 12px;
             height: self.width;
             border-radius: self.width / 2;
-            background: FluentPalette.accent;
+            background: FluentPalette.accent-background;
 
             animate background, width { duration: 150ms; }
         }

internal/compiler/widgets/fluent-base/spinbox.slint

@@ -57,18 +57,18 @@ export component SpinBox {
             i-background.background: FluentPalette.control-disabled;
             i-background.border-color: FluentPalette.border;
             i-base.color: FluentPalette.text-disabled;
-            i-base.selection-foreground-color: FluentPalette.text-on-accent-disabled;
+            i-base.selection-foreground-color: FluentPalette.text-accent-foreground-disabled;
         }
         focused when root.has-focus : {
             i-background.background: FluentPalette.control-input-active;
             i-background.border-color: FluentPalette.border;
-            i-focus-border.background: FluentPalette.accent;
+            i-focus-border.background: FluentPalette.accent-background;
         }
     ]
 
     i-background := Rectangle {
         border-radius: 4px;
-        background: FluentPalette.surface;
+        background: FluentPalette.control-background;
         border-width: 1px;
         border-color: FluentPalette.text-control-border;
 
@@ -85,11 +85,11 @@ export component SpinBox {
 
                 i-base := SpinBoxBase {
                     width: 100%;
-                    color: FluentPalette.on-surface;
+                    color: FluentPalette.control-foreground;
                     font-size: FluentFontSettings.body.font-size;
                     font-weight: FluentFontSettings.body.font-weight;
-                    selection-background-color: FluentPalette.accent-selected-text;
-                    selection-foreground-color: FluentPalette.on-accent;
+                    selection-background-color: FluentPalette.selection-background;
+                    selection-foreground-color: FluentPalette.accent-foreground;
                 }
             }
 

internal/compiler/widgets/fluent-base/spinner.slint

@@ -19,6 +19,6 @@ export component Spinner {
         width: 100%;
         height: 100%;
         stroke-width: 2px;
-        stroke: FluentPalette.accent;
+        stroke: FluentPalette.accent-background;
     }
 }

internal/compiler/widgets/fluent-base/std-widgets-base.slint

@@ -5,7 +5,7 @@
 
 import { AboutSlint } from "../common/common.slint";
 import { StandardButton } from "../common/standardbutton.slint";
-import { StyleMetrics, ScrollView, Button } from "std-widgets-impl.slint";
+import { StyleMetrics, ScrollView, Button, Palette } from "std-widgets-impl.slint";
 
 import { CheckBox } from "checkbox.slint";
 export { CheckBox }
@@ -46,6 +46,6 @@ export { Switch }
 import { TextEdit } from "textedit.slint";
 export { TextEdit }
 
-export { StyleMetrics, ScrollView, Button, StandardButton, AboutSlint }
+export { StyleMetrics, ScrollView, Button, StandardButton, AboutSlint, Palette }
 
 export * from "tableview.slint";

internal/compiler/widgets/fluent-base/std-widgets-impl.slint

@@ -26,3 +26,17 @@ export global StyleMetrics  {
     out property <color> textedit-text-color-disabled: FluentPalette.text-disabled;
     out property <bool> dark-color-scheme: FluentPalette.dark-color-scheme;
 }
+
+export global Palette {
+    out property <brush> background: FluentPalette.background;
+    out property <brush> foreground: FluentPalette.foreground;
+    out property <brush> alternate-background: FluentPalette.alternate-background;
+    out property <brush> alternate-foreground: FluentPalette.alternate-foreground;
+    out property <brush> control-background: FluentPalette.control-background;
+    out property <brush> control-foreground: FluentPalette.control-foreground;
+    out property <brush> accent-background: FluentPalette.accent-background;
+    out property <brush> accent-foreground: FluentPalette.accent-foreground;
+    out property <brush> selection-background: FluentPalette.selection-background;
+    out property <brush> selection-foreground: FluentPalette.selection-foreground;
+    out property <brush> border: FluentPalette.border;
+}

internal/compiler/widgets/fluent-base/styling.slint

@@ -27,25 +27,27 @@ export global FluentPalette {
 
     // base palette
     out property <brush> background: dark-color-scheme ? #1C1C1C : #FAFAFA;
-    out property <brush> background-alt: dark-color-scheme ? #2C2C2C : #f0f0f0;
     out property <brush> foreground: dark-color-scheme ? #FFFFFF : #000000E6;
-    out property <brush> accent: dark-color-scheme ? #60CDFF : #005FB8;
-    out property <brush> on-accent: dark-color-scheme ? #000000 : #FFFFFF;
-    out property <brush> surface: dark-color-scheme ? #FFFFFF0F : #FFFFFFB3;
-    out property <brush> on-surface: dark-color-scheme ? #FFFFFF : #000000E6;
+    out property <brush> alternate-background: dark-color-scheme ? #2C2C2C : #f0f0f0;
+    out property <brush> alternate-foreground: dark-color-scheme ? #FFFFFF : #000000E6;
+    out property <brush> control-background: dark-color-scheme ? #FFFFFF0F : #FFFFFFB3;
+    out property <brush> control-foreground: dark-color-scheme ? #FFFFFF : #000000E6;
+    out property <brush> accent-background: dark-color-scheme ? #60CDFF : #005FB8;
+    out property <brush> accent-foreground: dark-color-scheme ? #000000 : #FFFFFF;
+    out property <brush> selection-background: #0078D4;
+    out property <brush> selection-foreground: dark-color-scheme ? #000000 : #FFFFFF;
     out property <brush> border: dark-color-scheme ? #FFFFFF14 : #00000073;
 
     // additional palette
-    out property <brush> accent-secondary: dark-color-scheme ? #60CDFFE6 : #005FB8E6;
-    out property <brush> accent-tertiary: dark-color-scheme ? #60CDFFCC : #005FB8CC;
+    out property <brush> secondary-accent-background: dark-color-scheme ? #60CDFFE6 : #005FB8E6;
+    out property <brush> tertiary-accent-background: dark-color-scheme ? #60CDFFCC : #005FB8CC;
     out property <brush> accent-disabled: dark-color-scheme ? #FFFFFF29 : #00000038;
     out property <brush> accent-control-border: dark-color-scheme ? @linear-gradient(180deg, #FFFFFF14 90.67%, #00000024 100%)
         : @linear-gradient(180deg, #FFFFFF14 90.67%, #00000066 100%);
-    out property <brush> accent-selected-text: #0078D4;
     out property <brush> control-border: dark-color-scheme ? @linear-gradient(180deg, #FFFFFF17 0%, #00000012 8.33%)
         : @linear-gradient(180deg, #0000000F 90.58%, #00000029 100%);
-    out property <brush> text-on-accent-secondary: dark-color-scheme ? #00000080 : #FFFFFFB3;
-    out property <brush> text-on-accent-disabled: dark-color-scheme ? #FFFFFF87 : #FFFFFF;
+    out property <brush> text-accent-foreground-secondary: dark-color-scheme ? #00000080 : #FFFFFFB3;
+    out property <brush> text-accent-foreground-disabled: dark-color-scheme ? #FFFFFF87 : #FFFFFF;
     out property <brush> text-secondary: dark-color-scheme ? #FFFFFFC9 : #00000099;
     out property <brush> text-tertiary: dark-color-scheme ? #FFFFFF8A : #00000073;
     out property <brush> text-disabled: dark-color-scheme ? #FFFFFF5E : #0000005E;
@@ -66,7 +68,7 @@ export global FluentPalette {
     out property <brush> control-input-active: dark-color-scheme ? #1E1E1EB3 : #FFFFFF;
     out property <brush> focus-stroke-inner: dark-color-scheme ? #000000B3 : #FFFFFF;
     out property <brush> focus-stroke-outer: dark-color-scheme ? #FFFFFF : #000000E6;
-    out property <brush> surface-stroke-flyout: dark-color-scheme ? #00000033 : #0000000F;
+    out property <brush> control-background-stroke-flyout: dark-color-scheme ? #00000033 : #0000000F;
     out property <brush> sub-title-secondary: dark-color-scheme ? #FFFFFF0F : #0000000A;
     out property <brush> sub-title-tertiary: dark-color-scheme ? #FFFFFF0A : #00000005;
     out property <brush> shadow: dark-color-scheme ? #00000042 : #00000024;

internal/compiler/widgets/fluent-base/switch.slint

@@ -39,26 +39,26 @@ export component Switch {
             i-rail.border-color: FluentPalette.control-strong-stroke-disabled;
             i-thumb.background: FluentPalette.text-disabled;
             root.text-color: FluentPalette.text-disabled;
-            i-thumb.background: root.checked ? FluentPalette.text-on-accent-disabled : FluentPalette.text-secondary;
+            i-thumb.background: root.checked ? FluentPalette.text-accent-foreground-disabled : FluentPalette.text-secondary;
         }
         pressed when i-touch-area.pressed : {
-            i-rail.background: root.checked ? FluentPalette.accent-tertiary : FluentPalette.control-alt-quartiary;
+            i-rail.background: root.checked ? FluentPalette.tertiary-accent-background : FluentPalette.control-alt-quartiary;
             i-thumb.width: 17px;
             i-thumb.height: 14px;
             i-thumb.border-width: root.checked ? 1px : 0;
-            i-thumb.background: root.checked ? FluentPalette.on-accent : FluentPalette.text-secondary;
+            i-thumb.background: root.checked ? FluentPalette.accent-foreground : FluentPalette.text-secondary;
         }
         hover when i-touch-area.has-hover : {
-            i-rail.background:  root.checked ? FluentPalette.accent-secondary : FluentPalette.control-alt-tertiary;
+            i-rail.background:  root.checked ? FluentPalette.secondary-accent-background : FluentPalette.control-alt-tertiary;
             i-thumb.width: 14px;
             i-thumb.border-width: root.checked ? 1px : 0;
-            i-thumb.background: root.checked ? FluentPalette.on-accent : FluentPalette.text-secondary;
+            i-thumb.background: root.checked ? FluentPalette.accent-foreground : FluentPalette.text-secondary;
         }
         selected when root.checked : {
-            i-rail.background: FluentPalette.accent;
+            i-rail.background: FluentPalette.accent-background;
             i-thumb.border-width: 1px;
             i-thumb.border-color: FluentPalette.circle-border;
-            i-thumb.background: FluentPalette.on-accent;
+            i-thumb.background: FluentPalette.accent-foreground;
         }
     ]
 

internal/compiler/widgets/fluent-base/tableview.slint

@@ -102,7 +102,7 @@ component TableViewRow inherits Rectangle {
     min-width: i-layout.min-width;
     min-height: max(34px, i-layout.min-height);
     border-radius: 4px;
-    background: root.even ? FluentPalette.surface : transparent;
+    background: root.even ? FluentPalette.control-background : transparent;
 
     states [
         pressed when i-touch-area.pressed : {
@@ -136,7 +136,7 @@ component TableViewRow inherits Rectangle {
         y: (parent.height - self.height) / 2;
         width: 3px;
         height: 0px;
-        background: FluentPalette.accent;
+        background: FluentPalette.accent-background;
         border-radius: 2px;
 
         animate height { duration: 150ms; easing: ease-out; }
@@ -270,7 +270,7 @@ export component StandardTableView {
                             text: cell.text;
                             font-weight: FluentFontSettings.body.font-weight;
                             font-size: FluentFontSettings.body.font-size;
-                            color: mod(idx, 2) == 0 ? FluentPalette.on-surface : FluentPalette.text-secondary;
+                            color: mod(idx, 2) == 0 ? FluentPalette.control-foreground : FluentPalette.text-secondary;
                         }
                     }
                 }

internal/compiler/widgets/fluent-base/tabwidget.slint

@@ -79,7 +79,7 @@ export component TabImpl inherits Rectangle {
             horizontal-alignment: left;
             font-size: root.is-current ? FluentFontSettings.body-strong.font-size : FluentFontSettings.body.font-size;
             font-weight: root.is-current ? FluentFontSettings.body-strong.font-weight : FluentFontSettings.body.font-weight;
-            color: root.is-current ? FluentPalette.on-surface : FluentPalette.text-secondary;
+            color: root.is-current ? FluentPalette.control-foreground : FluentPalette.text-secondary;
         }
     }
 

internal/compiler/widgets/fluent-base/textedit.slint

@@ -50,12 +50,12 @@ export component TextEdit {
             i-background.background: FluentPalette.control-disabled;
             i-background.border-color: FluentPalette.border;
             i-text-input.color: FluentPalette.text-disabled;
-            i-text-input.selection-foreground-color: FluentPalette.text-on-accent-disabled;
+            i-text-input.selection-foreground-color: FluentPalette.text-accent-foreground-disabled;
         }
         focused when root.has-focus : {
             i-background.background: FluentPalette.control-input-active;
             i-background.border-color: FluentPalette.border;
-            i-focus-border.background: FluentPalette.accent;
+            i-focus-border.background: FluentPalette.accent-background;
         }
     ]
 
@@ -63,7 +63,7 @@ export component TextEdit {
         width: 100%;
         height: 100%;
         border-radius: 4px;
-        background: FluentPalette.surface;
+        background: FluentPalette.control-background;
         border-width: 1px;
         border-color: FluentPalette.text-control-border;
 
@@ -80,8 +80,8 @@ export component TextEdit {
                 color: FluentPalette.foreground;
                 font-size: FluentFontSettings.body.font-size;
                 font-weight: FluentFontSettings.body.font-weight;
-                selection-background-color: FluentPalette.accent-selected-text;
-                selection-foreground-color: FluentPalette.on-accent;
+                selection-background-color: FluentPalette.selection-background;
+                selection-foreground-color: FluentPalette.accent-foreground;
                 single-line: false;
                 wrap: word-wrap;
 

internal/compiler/widgets/fluent-dark/std-widgets-impl.slint

@@ -1,5 +1,5 @@
 // Copyright © SixtyFPS GmbH <info@slint.dev>
 // SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-Royalty-free-1.1 OR LicenseRef-Slint-commercial
 
-import { StyleMetrics, ScrollView, Button, ListItem } from "../fluent-base/std-widgets-impl.slint";
-export { StyleMetrics, ScrollView, Button, ListItem }
+import { StyleMetrics, ScrollView, Button, ListItem, Palette } from "../fluent-base/std-widgets-impl.slint";
+export { StyleMetrics, ScrollView, Button, ListItem, Palette }

internal/compiler/widgets/fluent-light/std-widgets-impl.slint

@@ -1,5 +1,5 @@
 // Copyright © SixtyFPS GmbH <info@slint.dev>
 // SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-Royalty-free-1.1 OR LicenseRef-Slint-commercial
 
-import { StyleMetrics, ScrollView, Button, ListItem } from "../fluent-base/std-widgets-impl.slint";
+import { StyleMetrics, ScrollView, Button, ListItem, Palette } from "../fluent-base/std-widgets-impl.slint";
 export { StyleMetrics, ScrollView, Button, ListItem }

internal/compiler/widgets/fluent/std-widgets-impl.slint

@@ -1,5 +1,5 @@
 // Copyright © SixtyFPS GmbH <info@slint.dev>
 // SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-Royalty-free-1.1 OR LicenseRef-Slint-commercial
 
-import { StyleMetrics, ScrollView, Button, ListItem } from "../fluent-base/std-widgets-impl.slint";
-export { StyleMetrics, ScrollView, Button, ListItem }
+import { StyleMetrics, ScrollView, Button, ListItem, Palette } from "../fluent-base/std-widgets-impl.slint";
+export { StyleMetrics, ScrollView, Button, ListItem, Palette }

internal/compiler/widgets/material-base/button.slint

@@ -17,7 +17,7 @@ export component Button {
 
     callback clicked;
 
-    private property <brush> text-color: root.primary ? MaterialPalette.on-accent : MaterialPalette.on-surface;
+    private property <brush> text-color: root.primary ? MaterialPalette.accent-foreground : MaterialPalette.control-foreground;
     private property <float> text-opacity: 1.0;
 
     min-height: max(40px, i-layout.min-height);
@@ -28,13 +28,13 @@ export component Button {
 
     states [
         disabled when !root.enabled : {
-            i-background.background: MaterialPalette.on-background-alt;
+            i-background.background: MaterialPalette.foreground-alt;
             i-background.opacity: 0.12;
             root.text-opacity: 0.38;
-            root.text-color: MaterialPalette.on-surface;
+            root.text-color: MaterialPalette.control-foreground;
         }
         checked when root.checked: {
-            root.text-color: MaterialPalette.on-accent;
+            root.text-color: MaterialPalette.accent-foreground;
         }
     ]
 
@@ -42,7 +42,7 @@ export component Button {
         width: 100%;
         height: 100%;
         border-radius: 20px;
-        background: root.primary ? MaterialPalette.accent : MaterialPalette.surface;
+        background: root.primary ? MaterialPalette.accent-background : MaterialPalette.control-background;
         drop-shadow-color: transparent;
         drop-shadow-blur: Elevation.level0;
         drop-shadow-offset-y: 1px;
@@ -51,9 +51,9 @@ export component Button {
     i-state-layer := StateLayer {
         has-ripple: true;
         border-radius: i-background.border-radius;
-        background: MaterialPalette.on-background-alt;
+        background: MaterialPalette.foreground-alt;
         ripple-color: MaterialPalette.secondary-ripple;
-        selection-background: MaterialPalette.accent;
+        checked-background: MaterialPalette.accent-background;
         focusable: true;
 
         clicked => {

internal/compiler/widgets/material-base/checkbox.slint

@@ -23,46 +23,46 @@ export component CheckBox {
         disabled-selected when !root.enabled && root.checked  : {
             i-container.border-width: 0px;
             i-container.border-color: transparent;
-            i-container.background: MaterialPalette.accent;
+            i-container.background: MaterialPalette.accent-background;
             i-container.opacity: 0.38;
             i-text.opacity: 0.38;
-            i-text.color: MaterialPalette.accent;
+            i-text.color: MaterialPalette.accent-background;
         }
         disabled when !root.enabled : {
             i-container.opacity: 0.38;
             i-text.opacity: 0.38;
-            i-text.color: MaterialPalette.accent;
+            i-text.color: MaterialPalette.accent-background;
         }
         pressed when i-touch-area.pressed && !root.checked : {
             i-state-layer.opacity: 0.12;
         }
         pressed-selected when i-touch-area.pressed && root.checked : {
             i-state-layer.opacity: 0.12;
-            i-state-layer.background: MaterialPalette.on-surface;
+            i-state-layer.background: MaterialPalette.control-foreground;
             i-container.border-width: 0px;
             i-container.border-color: transparent;
-            i-container.background: MaterialPalette.accent;
+            i-container.background: MaterialPalette.accent-background;
         }
         hover-selected when i-touch-area.has-hover && root.checked : {
             i-state-layer.opacity: 0.08;
             i-container.border-width: 0px;
             i-container.border-color: transparent;
-            i-container.background: MaterialPalette.accent;
+            i-container.background: MaterialPalette.accent-background;
         }
         hover when i-touch-area.has-hover && !root.checked : {
-            i-state-layer.background: MaterialPalette.on-surface;
+            i-state-layer.background: MaterialPalette.control-foreground;
             i-state-layer.opacity: 0.08;
         }
         selected when !i-touch-area.has-hover && root.checked : {
             i-container.border-width: 0px;
             i-container.border-color: transparent;
-            i-container.background: MaterialPalette.accent;
+            i-container.background: MaterialPalette.accent-background;
         }
         focused-selected when i-focus-scope.has-focus && root.checked : {
             i-state-layer.opacity: 0.12;
         }
         focused when i-focus-scope.has-focus && !root.checked : {
-            i-state-layer.background: MaterialPalette.on-surface;
+            i-state-layer.background: MaterialPalette.control-foreground;
             i-state-layer.opacity: 0.12;
         }
     ]
@@ -82,7 +82,7 @@ export component CheckBox {
                     height: 100%;
                     border-radius: 2px;
                     border-width: 2px;
-                    border-color: MaterialPalette.on-surface-variant;
+                    border-color: MaterialPalette.control-foreground-variant;
                 }
 
                 i-state-layer := Rectangle {
@@ -91,7 +91,7 @@ export component CheckBox {
                     x: (parent.width - self.width) / 2;
                     y: (parent.height - self.height) / 2;
                     opacity: 0;
-                    background: MaterialPalette.accent;
+                    background: MaterialPalette.accent-background;
                     border-radius: 20px;
 
                     animate opacity { duration: 300ms; easing: ease; }
@@ -103,14 +103,14 @@ export component CheckBox {
                     width: 80%;
                     height: 80%;
                     source: Icons.check-mark;
-                    colorize: MaterialPalette.on-accent;
+                    colorize: MaterialPalette.accent-foreground;
 
                     states [
                         disabled when !root.enabled : {
-                            colorize: MaterialPalette.on-surface;
+                            colorize: MaterialPalette.control-foreground;
                         }
                         hover-selected when i-touch-area.has-hover && root.checked : {
-                            colorize: MaterialPalette.on-accent;
+                            colorize: MaterialPalette.accent-foreground;
                         }
                     ]
                 }
@@ -118,7 +118,7 @@ export component CheckBox {
         }
 
         i-text := Text {
-            color: MaterialPalette.on-surface;
+            color: MaterialPalette.control-foreground;
             horizontal-alignment: left;
             vertical-alignment: center;
             vertical-stretch: 1;

internal/compiler/widgets/material-base/combobox.slint

@@ -23,16 +23,16 @@ export component ComboBox {
 
     states [
         disabled when !root.enabled : {
-            i-background.border-color: MaterialPalette.on-surface;
+            i-background.border-color: MaterialPalette.control-foreground;
             i-background.opacity: 0.38;
             i-label.opacity: 0.38;
             i-icon.opacity: 0.38;
         }
         focused when root.has-focus : {
             i-background.border-width: 2px;
-            i-background.border-color: MaterialPalette.accent;
-            i-label.color: MaterialPalette.accent;
-            i-icon.colorize: MaterialPalette.accent;
+            i-background.border-color: MaterialPalette.accent-background;
+            i-label.color: MaterialPalette.accent-background;
+            i-icon.colorize: MaterialPalette.accent-background;
         }
     ]
 
@@ -60,7 +60,7 @@ export component ComboBox {
 
         i-label := Text {
             text <=> root.current-value;
-            color: MaterialPalette.on-surface;
+            color: MaterialPalette.control-foreground;
             vertical-alignment: center;
             // FIXME after Roboto font can be loaded
             // font-family: MaterialFontSettings.body-large.font;
@@ -73,7 +73,7 @@ export component ComboBox {
             height: 24px;
             y: (parent.height - self.height) / 2;
             source: Icons.expand-more;
-            colorize: MaterialPalette.on-surface;
+            colorize: MaterialPalette.control-foreground;
         }
     }
 
@@ -83,7 +83,7 @@ export component ComboBox {
         width: root.width;
 
         i-popup-container := Rectangle {
-            background: MaterialPalette.background-alt;
+            background: MaterialPalette.alternate-background;
             drop-shadow-color: MaterialPalette.shadow;
             drop-shadow-blur: Elevation.level2;
             drop-shadow-offset-y: 1px;

internal/compiler/widgets/material-base/components.slint

@@ -31,7 +31,7 @@ export component Ripple inherits Rectangle {
 // A touch area that also represents a visual state.
 export component StateLayer inherits TouchArea {
     in property <bool> focusable;
-    in property <brush> selection-background;
+    in property <brush> checked-background;
     in property <brush> ripple-color;
     in property <bool> has-ripple;
     in property <length> border-radius;
@@ -47,7 +47,7 @@ export component StateLayer inherits TouchArea {
         }
         checked when root.checked: {
             i-ripple.opacity: 1.0;
-            i-ripple.background: root.selection-background;
+            i-ripple.background: root.checked-background;
         }
         hover when root.has-hover: {
             i-ripple.opacity: 0.08;
@@ -111,7 +111,7 @@ export component ListItem {
         }
         checked when root.is-selected: {
             i-ripple.opacity: 1.0;
-            i-ripple.background: MaterialPalette.surface;
+            i-ripple.background: MaterialPalette.control-background;
         }
         hover when root.has-hover: {
             i-ripple.opacity: 0.08;
@@ -128,7 +128,7 @@ export component ListItem {
         ripple-y: root.pressed-y;
         clip: true;
         border-radius: 4px;
-        background: MaterialPalette.accent;
+        background: MaterialPalette.accent-background;
         ripple-color: MaterialPalette.accent-ripple;
         has-effect: true;
 
@@ -139,7 +139,7 @@ export component ListItem {
     if (root.has-focus) : Rectangle {
         border-radius: 4px;
         border-width: 2px;
-        border-color: MaterialPalette.accent;
+        border-color: MaterialPalette.accent-background;
     }
 
     i-layout := HorizontalLayout {
@@ -148,7 +148,7 @@ export component ListItem {
 
         label := Text {
             text: root.item.text;
-            color: MaterialPalette.on-surface;
+            color: MaterialPalette.control-foreground;
             vertical-alignment: center;
             // FIXME after Roboto font can be loaded
             //font-family: MaterialFontSettings.label-large.font;

internal/compiler/widgets/material-base/groupbox.slint

@@ -10,7 +10,7 @@ export component GroupBox {
 
     states [
         disabled when !root.enabled : {
-            i-background.border-color: MaterialPalette.on-surface;
+            i-background.border-color: MaterialPalette.control-foreground;
             i-background.opacity: 0.38;
             i-text.opacity: 0.38;
         }
@@ -20,7 +20,7 @@ export component GroupBox {
         spacing: 4px;
 
         i-text := Text {
-            color: MaterialPalette.on-surface;
+            color: MaterialPalette.control-foreground;
             // FIXME after Roboto font can be loaded
             //font-family: MaterialFontSettings.body-small.font;
             font-size: MaterialFontSettings.body-large.font-size;
@@ -34,7 +34,7 @@ export component GroupBox {
             border-width: 1px;
             border-color: MaterialPalette.border;
             vertical-stretch: 1;
-            background: MaterialPalette.background-alt;
+            background: MaterialPalette.alternate-background;
 
             HorizontalLayout {
                 padding: 16px;

internal/compiler/widgets/material-base/lineedit.slint

@@ -40,14 +40,14 @@ export component LineEdit {
 
     states [
         disabled when !root.enabled : {
-            i-background.border-color: MaterialPalette.on-surface;
+            i-background.border-color: MaterialPalette.control-foreground;
             i-background.opacity: 0.38;
             i-base.opacity: 0.38;
         }
         focused when root.has-focus : {
             i-background.border-width: 2px;
-            i-background.border-color: MaterialPalette.accent;
-            i-base.text-color: MaterialPalette.accent;
+            i-background.border-color: MaterialPalette.accent-background;
+            i-base.text-color: MaterialPalette.accent-background;
         }
     ]
 
@@ -67,10 +67,10 @@ export component LineEdit {
             text-color: MaterialPalette.foreground;
             font-size: MaterialFontSettings.body-large.font-size;
             font-weight: MaterialFontSettings.body-large.font-weight;
-            selection-foreground-color: MaterialPalette.accent;
+            selection-foreground-color: MaterialPalette.selection-foreground;
             margin: i-layout.padding-left + i-layout.padding-right;
             placeholder-color: MaterialPalette.border-variant;
-            selection-background-color: MaterialPalette.selection;
+            selection-background-color: MaterialPalette.selection-background;
         }
     }
 }

internal/compiler/widgets/material-base/progressindicator.slint

@@ -14,11 +14,11 @@ export component ProgressIndicator {
     accessible-value: root.progress;
 
     i-background := Rectangle {
-        background: MaterialPalette.surface-variant;
+        background: MaterialPalette.control-background-variant;
         clip: true;
 
         i-track := Rectangle {
-            background: MaterialPalette.accent;
+            background: MaterialPalette.accent-background;
             x: !root.indeterminate ? 0px : -parent.width + (parent.width * mod(animation-tick(), 2s) / 1s);
             y: (parent.height - self.height) / 2;
             width: !root.indeterminate ?  parent.width * min(1, max(0, root.progress)) : parent.width;

internal/compiler/widgets/material-base/scrollview.slint

@@ -14,7 +14,7 @@ component ScrollBar inherits Rectangle {
 
     states [
         disabled when !i-touch-area.enabled : {
-            i-background.border-color: MaterialPalette.on-surface;
+            i-background.border-color: MaterialPalette.control-foreground;
             i-handle.opacity: 0.12;
         }
         hover when i-touch-area.has-hover : {
@@ -28,7 +28,7 @@ component ScrollBar inherits Rectangle {
     i-state-layer := Rectangle {
         width: 100%;
         height: 100%;
-        background: MaterialPalette.accent;
+        background: MaterialPalette.accent-background;
         border-radius: 4px;
         opacity: 0;
         visible: i-handle.width > 0 && i-handle.height > 0;
@@ -104,7 +104,7 @@ export component ScrollView {
     preferred-width: 100%;
 
     Rectangle {
-        background: MaterialPalette.background-alt;
+        background: MaterialPalette.alternate-background;
     }
 
     i-flickable := Flickable {

internal/compiler/widgets/material-base/slider.slint

@@ -26,10 +26,10 @@ export component Slider {
 
     states [
         disabled when !root.enabled : {
-            i-handle.background: MaterialPalette.on-surface;
+            i-handle.background: MaterialPalette.control-foreground;
             i-handle.drop-shadow-blur: Elevation.level0;
-            i-track.background: MaterialPalette.on-surface;
-            i-background.background: MaterialPalette.on-surface;
+            i-track.background: MaterialPalette.control-foreground;
+            i-background.background: MaterialPalette.control-foreground;
             root.opacity: 0.38;
         }
         pressed when (i-touch-area.pressed && i-touch-area.i-handle-hover) || i-focus-scope.has-focus : {
@@ -37,13 +37,13 @@ export component Slider {
             i-handle.drop-shadow-blur: Elevation.level0;
         }
         hover when i-touch-area.i-handle-hover : {
-            i-state-layer.background: MaterialPalette.on-surface;
+            i-state-layer.background: MaterialPalette.control-foreground;
             i-state-layer.opacity: 0.08;
         }
     ]
 
     i-background := Rectangle {
-        background: MaterialPalette.surface-variant;
+        background: MaterialPalette.control-background-variant;
         opacity: 0.38;
         x: (parent.width - self.width) / 2;
         y: (parent.height - self.height) / 2;
@@ -53,7 +53,7 @@ export component Slider {
     }
 
     i-track := Rectangle {
-        background: MaterialPalette.accent;
+        background: MaterialPalette.accent-background;
         x: vertical ? (parent.width - self.width) / 2 : i-background.x;
         y: vertical ? i-background.y : (parent.height - self.height) / 2;
         width: vertical? i-background.width : i-handle.x + (i-handle.width / 2);
@@ -63,7 +63,7 @@ export component Slider {
 
     i-state-layer := Rectangle {
         opacity: 0;
-        background: MaterialPalette.accent;
+        background: MaterialPalette.accent-background;
         x: vertical ? (parent.width - self.width) / 2 : i-handle.x - (self.width - i-handle.width) / 2;
         y: vertical ? i-handle.y - (self.height - i-handle.height) / 2 : (parent.height - self.height) / 2;
         width: 40px;
@@ -74,7 +74,7 @@ export component Slider {
     }
 
     i-handle := Rectangle {
-        background: MaterialPalette.accent;
+        background: MaterialPalette.accent-background;
         x: vertical ? (parent.width - self.width) / 2 : (parent.width - i-handle.width) * (root.value - root.minimum) / (root.maximum - root.minimum);
         y: vertical ? (parent.height - i-handle.height) * (root.value - root.minimum) / (root.maximum - root.minimum) : (parent.height - self.height) / 2;
         width: vertical ? root.width : root.height;

internal/compiler/widgets/material-base/spinbox.slint

@@ -8,7 +8,7 @@ component SpinBoxButton inherits Rectangle {
     in-out property <bool> pressed: self.enabled && i-touch-area.pressed;
     in-out property <bool> enabled <=> i-touch-area.enabled;
     in-out property <float> icon-opacity: 1;
-    in-out property <brush> icon-fill: MaterialPalette.on-accent;
+    in-out property <brush> icon-fill: MaterialPalette.accent-foreground;
 
     callback clicked <=> i-touch-area.clicked;
 
@@ -16,10 +16,10 @@ component SpinBoxButton inherits Rectangle {
 
     states [
         disabled when !root.enabled : {
-            i-background.background: MaterialPalette.on-surface;
+            i-background.background: MaterialPalette.control-foreground;
             i-background.opacity: 0.12;
             icon-opacity: 0.38;
-            icon-fill: MaterialPalette.on-surface;
+            icon-fill: MaterialPalette.control-foreground;
         }
         pressed when i-touch-area.pressed : {
             i-state-layer.opacity: 0.12;
@@ -33,7 +33,7 @@ component SpinBoxButton inherits Rectangle {
         width: 100%;
         height: 100%;
         border-radius: max(self.width, self.height) / 2;
-        background: MaterialPalette.accent;
+        background: MaterialPalette.accent-background;
     }
 
     i-state-layer := Rectangle {
@@ -43,7 +43,7 @@ component SpinBoxButton inherits Rectangle {
         width: i-background.width;
         height: i-background.height;
         border-radius: i-background.border-radius;
-        background: MaterialPalette.on-accent;
+        background: MaterialPalette.accent-foreground;
 
         animate opacity { duration: 250ms; easing: ease; }
      }
@@ -81,14 +81,14 @@ export component SpinBox {
 
     states [
         disabled when !root.enabled : {
-            i-background.border-color: MaterialPalette.on-surface;
+            i-background.border-color: MaterialPalette.control-foreground;
             i-background.opacity: 0.38;
             i-base.opacity: 0.38;
         }
         focused when root.has-focus : {
             i-background.border-width: 2px;
-            i-background.border-color: MaterialPalette.accent;
-            i-base.color: MaterialPalette.accent;
+            i-background.border-color: MaterialPalette.accent-background;
+            i-base.color: MaterialPalette.accent-background;
         }
     ]
 
@@ -110,7 +110,7 @@ export component SpinBox {
 
                 i-base := SpinBoxBase {
                     width: 100%;
-                    color: MaterialPalette.on-surface;
+                    color: MaterialPalette.control-foreground;
                     font-size: MaterialFontSettings.body-large.font-size;
                     font-weight: MaterialFontSettings.body-large.font-weight;
                 }

internal/compiler/widgets/material-base/spinner.slint

@@ -19,6 +19,6 @@ export component Spinner {
         width: 100%;
         height: 100%;
         stroke-width: 2px;
-        stroke: MaterialPalette.accent;
+        stroke: MaterialPalette.accent-background;
     }
 }

internal/compiler/widgets/material-base/std-widgets-base.slint

@@ -5,7 +5,7 @@
 
 import { TextEdit, AboutSlint } from "../common/common.slint";
 import { StandardButton } from "../common/standardbutton.slint";
-import { StyleMetrics, ScrollView, Button, CheckBox  } from "std-widgets-impl.slint";
+import { StyleMetrics, ScrollView, Button, CheckBox, Palette  } from "std-widgets-impl.slint";
 import { LineEdit } from "lineedit.slint";
 import { TabWidgetImpl, TabImpl, TabBarImpl, TabWidget } from "tabwidget.slint";
 import { GroupBox } from "groupbox.slint";
@@ -20,7 +20,7 @@ import { Switch } from "switch.slint";
 
 export { StyleMetrics, ScrollView, Button, ComboBox, CheckBox, GroupBox, StandardButton, TextEdit, TabWidgetImpl,
     TabImpl, TabBarImpl, TabWidget, LineEdit, AboutSlint, VerticalBox, HorizontalBox,
-    GridBox, Slider, ListView, StandardListView, StandardTableView, SpinBox, ProgressIndicator, Switch }
+    GridBox, Slider, ListView, StandardListView, StandardTableView, SpinBox, ProgressIndicator, Switch, Palette }
 
 import { Spinner } from "spinner.slint";
 export { Spinner }

internal/compiler/widgets/material-base/std-widgets-impl.slint

@@ -27,3 +27,17 @@ export global StyleMetrics  {
     out property <string> default-font-family: "Roboto";
     out property <color> window-background: MaterialPalette.background;
 }
+
+export global Palette {
+    out property <brush> background: MaterialPalette.background;
+    out property <brush> foreground: MaterialPalette.foreground;
+    out property <brush> alternate-background: MaterialPalette.alternate-background;
+    out property <brush> alternate-foreground: MaterialPalette.alternate-foreground;
+    out property <brush> control-background: MaterialPalette.control-background;
+    out property <brush> control-foreground: MaterialPalette.control-foreground;
+    out property <brush> accent-background: MaterialPalette.accent-background;
+    out property <brush> accent-foreground: MaterialPalette.accent-foreground;
+    out property <brush> selection-background: MaterialPalette.selection-background;
+    out property <brush> selection-foreground: MaterialPalette.selection-foreground;
+    out property <brush> border: MaterialPalette.border;
+}

internal/compiler/widgets/material-base/styling.slint

@@ -42,24 +42,26 @@ export global Elevation {
 export global MaterialPalette {
     // base palette
     out property <brush> background: !root.dark-color-scheme ? #f8f3f9 : #2a282d;
-    out property <brush> background-alt: !root.dark-color-scheme ? #FFFBFE : #1C1B1F;
     out property <brush> foreground: !root.dark-color-scheme ? #1C1B1F : #E6E1E5;
-    out property <brush> accent: !root.dark-color-scheme ? #6750A4 : #D0BCFF;
-    out property <brush> on-accent: !root.dark-color-scheme ? #FFFFFF : #371E73;
-    out property <brush> surface: !root.dark-color-scheme ? #E8DEF8 : #4A4458;
-    out property <brush> on-surface: !root.dark-color-scheme ? #1E192B : #E8DEF8;
+    out property <brush> alternate-background: !root.dark-color-scheme ? #FFFBFE : #1C1B1F;
+    out property <brush> alternate-foreground: !root.dark-color-scheme ? #1C1B1F : #E6E1E5;
+    out property <brush> control-background: !root.dark-color-scheme ? #E8DEF8 : #4A4458;
+    out property <brush> control-foreground: !root.dark-color-scheme ? #1E192B : #E8DEF8;
+    out property <brush> accent-background: !root.dark-color-scheme ? #6750A4 : #D0BCFF;
+    out property <brush> accent-foreground: !root.dark-color-scheme ? #FFFFFF : #371E73;
+    out property <brush> selection-background: !root.dark-color-scheme ? #6750A44D : #D0BCFF4D;
+    out property <brush> selection-foreground: !root.dark-color-scheme ? #1C1B1F : #E6E1E5;
     out property <brush> border: !root.dark-color-scheme ? #79747E : #938F99;
-    out property <brush> selection: !root.dark-color-scheme ? #6750A44D : #D0BCFF4D;
 
     // additional palette
-    out property <brush> surface-variant: !root.dark-color-scheme ? #E7E0EC.darker(0.2) : #49454F;
-    out property <brush> on-surface-variant: !root.dark-color-scheme ? #49454E : #CAC4D0;
-    out property <brush> surface-tint: !root.dark-color-scheme ? #6750A4 : #D0BCFF;
+    out property <brush> control-background-variant: !root.dark-color-scheme ? #E7E0EC.darker(0.2) : #49454F;
+    out property <brush> control-foreground-variant: !root.dark-color-scheme ? #49454E : #CAC4D0;
+    out property <brush> control-background-tint: !root.dark-color-scheme ? #6750A4 : #D0BCFF;
     out property <brush> accent-container: !root.dark-color-scheme ? #4F378B : #4F378B;
     out property <brush> accent-ripple: !root.dark-color-scheme ? #D0BCFF : #6750A4;
     out property <brush> shadow: #000000;
     out property <brush> border-variant: !root.dark-color-scheme ? #C4C7C5 : #444746;
-    out property <brush> on-background-alt: !root.dark-color-scheme ? #1C1B1F : #E6E1E5;
+    out property <brush> foreground-alt: !root.dark-color-scheme ? #1C1B1F : #E6E1E5;
     out property <brush> secondary-ripple: !root.dark-color-scheme ? #fffc : #000000;
     in-out property <bool> dark-color-scheme: ColorSchemeSelector.dark-color-scheme;
 }

internal/compiler/widgets/material-base/switch.slint

@@ -32,7 +32,7 @@ export component Switch {
     states [
         disabled-selected when !root.enabled && root.checked  : {
             i-label.opacity: 0.38;
-            i-label.color: MaterialPalette.accent;
+            i-label.color: MaterialPalette.accent-background;
             track.opacity: 0.12;
             i-handle.opacity: 0.38;
             i-handle.width: 24px;
@@ -40,55 +40,55 @@ export component Switch {
         }
         disabled when !root.enabled : {
             i-label.opacity: 0.38;
-            i-label.color: MaterialPalette.accent;
+            i-label.color: MaterialPalette.accent-background;
             track.opacity: 0.12;
             i-handle.opacity: 0.38;
         }
         pressed when i-touch-area.pressed && !root.checked : {
             state-layer.opacity: 0.12;
-            i-handle.background: MaterialPalette.on-surface-variant;
+            i-handle.background: MaterialPalette.control-foreground-variant;
             i-handle.width: 28px;
             i-handle.x: track.border-width;
         }
         pressed-selected when i-touch-area.pressed && root.checked : {
             state-layer.opacity: 0.12;
-            state-layer.background: MaterialPalette.on-surface;
-            track.background: MaterialPalette.accent;
-            track.border-color: MaterialPalette.accent;
+            state-layer.background: MaterialPalette.control-foreground;
+            track.background: MaterialPalette.accent-background;
+            track.border-color: MaterialPalette.accent-background;
             i-handle.background: MaterialPalette.accent-container;
             i-handle.width: 28px;
             i-handle.x: track.width - 28px - 4px;
         }
         hover-selected when i-touch-area.has-hover && root.checked : {
             state-layer.opacity: 0.08;
-            track.background: MaterialPalette.accent;
-            track.border-color: MaterialPalette.accent;
+            track.background: MaterialPalette.accent-background;
+            track.border-color: MaterialPalette.accent-background;
             i-handle.background: MaterialPalette.accent-container;
             i-handle.width: 24px;
             i-handle.x: track.width - 24px - 4px;
         }
         hover when i-touch-area.has-hover && !root.checked : {
-            state-layer.background: MaterialPalette.on-surface;
+            state-layer.background: MaterialPalette.control-foreground;
             state-layer.opacity: 0.08;
-            i-handle.background: MaterialPalette.on-surface-variant;
+            i-handle.background: MaterialPalette.control-foreground-variant;
         }
         selected when !i-touch-area.has-hover && root.checked : {
-            track.background: MaterialPalette.accent;
-            track.border-color: MaterialPalette.accent;
+            track.background: MaterialPalette.accent-background;
+            track.border-color: MaterialPalette.accent-background;
             i-handle.background: MaterialPalette.accent-container;
             i-handle.width: 24px;
             i-handle.x: track.width - 24px - 4px;
         }
         focused-selected when i-focus-scope.has-focus && root.checked : {
             state-layer.opacity: 0.12;
-            track.background: MaterialPalette.accent;
-            track.border-color: MaterialPalette.accent;
+            track.background: MaterialPalette.accent-background;
+            track.border-color: MaterialPalette.accent-background;
             i-handle.background: MaterialPalette.accent-container;
             i-handle.width: 24px;
             i-handle.x: track.width - 24px - 4px;
         }
         focused when i-focus-scope.has-focus && !root.checked : {
-            state-layer.background: MaterialPalette.on-surface;
+            state-layer.background: MaterialPalette.control-foreground;
             state-layer.opacity: 0.12;
         }
     ]
@@ -107,7 +107,7 @@ export component Switch {
                     border-radius: 16px;
                     border-width: 2px;
                     border-color: MaterialPalette.border;
-                    background: MaterialPalette.surface-variant;
+                    background: MaterialPalette.control-background-variant;
                 }
 
                 i-handle := Rectangle {
@@ -124,7 +124,7 @@ export component Switch {
                         x: (parent.width - self.width) / 2;
                         y: (parent.height - self.height) / 2;
                         opacity: 0;
-                        background: MaterialPalette.accent;
+                        background: MaterialPalette.accent-background;
                         border-radius: 20px;
 
                         animate opacity { duration: 300ms; easing: ease; }
@@ -137,7 +137,7 @@ export component Switch {
             }
 
             i-label := Text {
-                color: MaterialPalette.on-surface;
+                color: MaterialPalette.control-foreground;
                 horizontal-alignment: left;
                 vertical-alignment: center;
                 vertical-stretch: 0;

internal/compiler/widgets/material-base/tableview.slint

@@ -12,8 +12,8 @@ component TableViewColumn inherits Rectangle {
     callback adjust-size(/* size */ length);
 
     i-state-layer := StateLayer {
-        background: MaterialPalette.accent;
-        selection-background: MaterialPalette.background-alt;
+        background: MaterialPalette.accent-background;
+        checked-background: MaterialPalette.alternate-background;
         ripple-color: MaterialPalette.accent-ripple;
         has-ripple: true;
     }
@@ -35,7 +35,7 @@ component TableViewColumn inherits Rectangle {
             source: root.sort-order == SortOrder.ascending ?
                 Icons.arrow-upward :
                 Icons.arrow-downward;
-            colorize: MaterialPalette.on-surface;
+            colorize: MaterialPalette.control-foreground;
         }
     }
 
@@ -100,8 +100,8 @@ component TableViewRow inherits Rectangle {
 
     i-state-layer := StateLayer {
         checked: root.selected;
-        background: MaterialPalette.accent;
-        selection-background: MaterialPalette.surface;
+        background: MaterialPalette.accent-background;
+        checked-background: MaterialPalette.control-background;
         ripple-color: MaterialPalette.accent-ripple;
         has-ripple: true;
     }

internal/compiler/widgets/material-base/tabwidget.slint

@@ -42,7 +42,7 @@ export component TabImpl inherits Rectangle {
     accessible-label: root.title;
 
     i-container := Rectangle {
-        background: MaterialPalette.background-alt;
+        background: MaterialPalette.alternate-background;
     }
 
     i-state-layer := Rectangle {
@@ -50,7 +50,7 @@ export component TabImpl inherits Rectangle {
         width: 100%;
         height: 100%;
         border-radius: i-container.border-radius;
-        background: MaterialPalette.accent;
+        background: MaterialPalette.accent-background;
 
         animate opacity { duration: 250ms; easing: ease; }
      }
@@ -61,7 +61,7 @@ export component TabImpl inherits Rectangle {
 
         i-text := Text {
             vertical-alignment: center;
-            color: !root.active ? MaterialPalette.on-surface : MaterialPalette.accent;
+            color: !root.active ? MaterialPalette.control-foreground : MaterialPalette.accent-background;
             // FIXME after Roboto font can be loaded
             //font-family: MaterialFontSettings.title-small.font;
             font-size: MaterialFontSettings.title-small.font-size;
@@ -76,7 +76,7 @@ export component TabImpl inherits Rectangle {
         width: 100%;
         height: 3px;
         y: parent.height - self.height;
-        background: MaterialPalette.accent;
+        background: MaterialPalette.accent-background;
 
         animate opacity { duration: 250ms; easing: ease; }
     }

internal/compiler/widgets/material-dark/std-widgets-impl.slint

@@ -1,5 +1,5 @@
 // Copyright © SixtyFPS GmbH <info@slint.dev>
 // SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-Royalty-free-1.1 OR LicenseRef-Slint-commercial
 
-import { StyleMetrics, ScrollView, Button, ListItem } from "../material-base/std-widgets-impl.slint";
-export { StyleMetrics, ScrollView, Button, ListItem }
+import { StyleMetrics, ScrollView, Button, ListItem, Palette } from "../material-base/std-widgets-impl.slint";
+export { StyleMetrics, ScrollView, Button, ListItem, Palette }

internal/compiler/widgets/material-light/std-widgets-impl.slint

@@ -1,5 +1,5 @@
 // Copyright © SixtyFPS GmbH <info@slint.dev>
 // SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-Royalty-free-1.1 OR LicenseRef-Slint-commercial
 
-import { StyleMetrics, ScrollView, Button, ListItem } from "../material-base/std-widgets-impl.slint";
-export { StyleMetrics, ScrollView, Button, ListItem }
+import { StyleMetrics, ScrollView, Button, ListItem, Palette } from "../material-base/std-widgets-impl.slint";
+export { StyleMetrics, ScrollView, Button, ListItem, Palette }

internal/compiler/widgets/material/std-widgets-impl.slint

@@ -1,5 +1,5 @@
 // Copyright © SixtyFPS GmbH <info@slint.dev>
 // SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-Royalty-free-1.1 OR LicenseRef-Slint-commercial
 
-import { StyleMetrics, ScrollView, Button, Switch, ListItem } from "../material-base/std-widgets-impl.slint";
-export { StyleMetrics, ScrollView, Button, Switch, ListItem }
+import { StyleMetrics, ScrollView, Button, Switch, ListItem, Palette } from "../material-base/std-widgets-impl.slint";
+export { StyleMetrics, ScrollView, Button, Switch, ListItem, Palette }

internal/compiler/widgets/qt/std-widgets-impl.slint

@@ -2,6 +2,7 @@
 // SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-Royalty-free-1.1 OR LicenseRef-Slint-commercial
 
 export { NativeStyleMetrics as StyleMetrics }
+export { NativePalette as Palette }
 
 import { ScrollView } from "scrollview.slint";
 export { ScrollView }

internal/compiler/widgets/qt/std-widgets.slint

@@ -2,9 +2,9 @@
 // SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-Royalty-free-1.1 OR LicenseRef-Slint-commercial
 
 import { TextEdit, AboutSlint } from "../common/common.slint";
-import { StyleMetrics, ScrollView  } from "std-widgets-impl.slint";
+import { StyleMetrics, ScrollView, Palette } from "std-widgets-impl.slint";
 import { StandardTableView } from "tableview.slint";
-export { StyleMetrics, ScrollView, TextEdit, AboutSlint, StandardTableView }
+export { StyleMetrics, ScrollView, TextEdit, AboutSlint, StandardTableView, Palette }
 
 import { Button, StandardButton } from "button.slint";
 export { Button, StandardButton }