mirror of
https://github.com/slint-ui/slint.git
synced 2025-08-09 21:28:25 +00:00
686f5e43e2
Instead of having all style duplicated and re-using a base, we just hack into the funciton that queries the dark/light theme based on the style suffix known at compile time. This removes one of the problem that happens when trying to work on the widget style with the extension, as it relies on include path hacks
89 lines
4.6 KiB
Text
89 lines
4.6 KiB
Text
// Copyright © SixtyFPS GmbH <info@slint.dev>
|
|
// SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-Royalty-free-2.0 OR LicenseRef-Slint-Software-3.0
|
|
|
|
|
|
import { ColorSchemeSelector } from "color-scheme.slint";
|
|
|
|
// typo settings
|
|
struct TextStyle {
|
|
font-size: relative-font-size,
|
|
font-weight: int}
|
|
|
|
export global MaterialFontSettings {
|
|
out property <TextStyle> label-large: { font-size: 14 * 0.0625rem, font-weight: 500 };
|
|
out property <TextStyle> label-medium: { font-size: 12 * 0.0625rem, font-weight: 500 };
|
|
out property <TextStyle> body-large: { font-size: 16 * 0.0625rem, font-weight: 400 };
|
|
out property <TextStyle> body-small: { font-size: 12 * 0.0625rem, font-weight: 400 };
|
|
out property <TextStyle> title-small: { font-size: 14 * 0.0625rem, font-weight: 500 };
|
|
out property <TextStyle> headline-large: {
|
|
font-size: 32 * 0.0625rem,
|
|
font-weight: 500
|
|
};
|
|
}
|
|
|
|
export global Elevation {
|
|
out property <length> level0: 0px;
|
|
out property <length> level1: 1px;
|
|
out property <length> level2: 2px;
|
|
}
|
|
|
|
export global MaterialPalette {
|
|
// base palette
|
|
out property <brush> background: !root.dark-color-scheme ? #f8f3f9 : #2a282d;
|
|
out property <brush> foreground: !root.dark-color-scheme ? #1C1B1F : #E6E1E5;
|
|
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;
|
|
|
|
// additional palette
|
|
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> foreground-alt: !root.dark-color-scheme ? #1C1B1F : #E6E1E5;
|
|
out property <brush> secondary-ripple: !root.dark-color-scheme ? #fffc : #000000;
|
|
out property <brush> surface-container-high: !root.dark-color-scheme ? #ECE6F0 : #2B2930;
|
|
out property <brush> surface-container-highest: !root.dark-color-scheme ? #E6E0E9 : #36343B;
|
|
out property <brush> tertiary-container: !root.dark-color-scheme ? #FFD8E4 : #633B48;
|
|
out property <brush> on-tertiary-container: !root.dark-color-scheme ? #31111D : #FFD8E4;
|
|
|
|
out property <brush> state-default: dark-color-scheme ? #E6E0E9 : #1D1B20;
|
|
out property <brush> state-secondary: dark-color-scheme ? #D0BCFF : #6750A4;
|
|
out property <brush> state-tertiary: dark-color-scheme ? #381E72 : #FFFFFF;
|
|
|
|
in-out property <ColorScheme> color-scheme: ColorSchemeSelector.color-scheme;
|
|
property <bool> dark-color-scheme: {
|
|
if (color-scheme == ColorScheme.unknown) {
|
|
return SlintInternal.color-scheme == ColorScheme.dark;
|
|
}
|
|
return color-scheme == ColorScheme.dark;
|
|
}
|
|
}
|
|
|
|
export global Icons {
|
|
out property <image> arrow-downward: @image-url("_arrow-downward.svg");
|
|
out property <image> arrow-drop-down: @image-url("_arrow-drop-down.svg");
|
|
out property <image> arrow-drop-up: @image-url("_arrow-drop-up.svg");
|
|
out property <image> arrow-upward: @image-url("_arrow-upward.svg");
|
|
out property <image> check-mark: @image-url("_check-mark.svg");
|
|
out property <image> expand-more: @image-url("_expand-more.svg");
|
|
out property <image> keyboard: @image-url("_keyboard.svg");
|
|
out property <image> clock: @image-url("_clock.svg");
|
|
out property <image> arrow-back: @image-url("_arrow_back.svg");
|
|
out property <image> arrow-forward: @image-url("_arrow_forward.svg");
|
|
out property <image> edit: @image-url("_edit.svg");
|
|
out property <image> calendar: @image-url("_calendar.svg");
|
|
}
|
|
|
|
export global MaterialSizeSettings {
|
|
out property <length> item-height: 48px;
|
|
}
|