1// Copyright © SixtyFPS GmbH <info@slint.dev>
2// SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-Royalty-free-2.0 OR LicenseRef-Slint-Software-3.0
3
4
5import { ColorSchemeSelector } from "color-scheme.slint";
6
7// typo settings
8struct TextStyle {
9 font-size: relative-font-size,
10 font-weight: int}
11
12export global MaterialFontSettings {
13 out property <TextStyle> label-large: { font-size: 14 * 0.0625rem, font-weight: 500 };
14 out property <TextStyle> label-medium: { font-size: 12 * 0.0625rem, font-weight: 500 };
15 out property <TextStyle> body-large: { font-size: 16 * 0.0625rem, font-weight: 400 };
16 out property <TextStyle> body-small: { font-size: 12 * 0.0625rem, font-weight: 400 };
17 out property <TextStyle> title-small: { font-size: 14 * 0.0625rem, font-weight: 500 };
18 out property <TextStyle> headline-large: {
19 font-size: 32 * 0.0625rem,
20 font-weight: 500
21 };
22}
23
24export global Elevation {
25 out property <length> level0: 0px;
26 out property <length> level1: 1px;
27 out property <length> level2: 2px;
28}
29
30export global MaterialPalette {
31 // base palette
32 out property <brush> background: !root.dark-color-scheme ? #f8f3f9 : #2a282d;
33 out property <brush> foreground: !root.dark-color-scheme ? #1C1B1F : #E6E1E5;
34 out property <brush> alternate-background: !root.dark-color-scheme ? #FFFBFE : #1C1B1F;
35 out property <brush> alternate-foreground: !root.dark-color-scheme ? #1C1B1F : #E6E1E5;
36 out property <brush> control-background: !root.dark-color-scheme ? #E8DEF8 : #4A4458;
37 out property <brush> control-foreground: !root.dark-color-scheme ? #1E192B : #E8DEF8;
38 out property <brush> accent-background: !root.dark-color-scheme ? #6750A4 : #D0BCFF;
39 out property <brush> accent-foreground: !root.dark-color-scheme ? #FFFFFF : #371E73;
40 out property <brush> selection-background: !root.dark-color-scheme ? #6750A44D : #D0BCFF4D;
41 out property <brush> selection-foreground: !root.dark-color-scheme ? #1C1B1F : #E6E1E5;
42 out property <brush> border: !root.dark-color-scheme ? #79747E : #938F99;
43
44 // additional palette
45 out property <brush> control-background-variant: !root.dark-color-scheme ? #E7E0EC.darker(0.2) : #49454F;
46 out property <brush> control-foreground-variant: !root.dark-color-scheme ? #49454E : #CAC4D0;
47 out property <brush> control-background-tint: !root.dark-color-scheme ? #6750A4 : #D0BCFF;
48 out property <brush> accent-container: !root.dark-color-scheme ? #4F378B : #4F378B;
49 out property <brush> accent-ripple: !root.dark-color-scheme ? #D0BCFF : #6750A4;
50 out property <brush> shadow: #000000.with_alpha(0.3);
51 out property <brush> border-variant: !root.dark-color-scheme ? #C4C7C5 : #444746;
52 out property <brush> foreground-alt: !root.dark-color-scheme ? #1C1B1F : #E6E1E5;
53 out property <brush> secondary-ripple: !root.dark-color-scheme ? #fffc : #000000;
54 out property <brush> surface-container: !root.dark-color-scheme ? #F3EDF7 : #211F26;
55 out property <brush> surface-container-high: !root.dark-color-scheme ? #ECE6F0 : #2B2930;
56 out property <brush> surface-container-highest: !root.dark-color-scheme ? #E6E0E9 : #36343B;
57 out property <brush> tertiary-container: !root.dark-color-scheme ? #FFD8E4 : #633B48;
58 out property <brush> on-tertiary-container: !root.dark-color-scheme ? #31111D : #FFD8E4;
59
60 out property <brush> state-default: dark-color-scheme ? #E6E0E9 : #1D1B20;
61 out property <brush> state-secondary: dark-color-scheme ? #D0BCFF : #6750A4;
62 out property <brush> state-tertiary: dark-color-scheme ? #381E72 : #FFFFFF;
63
64 in-out property <ColorScheme> color-scheme: ColorSchemeSelector.color-scheme;
65 property <bool> dark-color-scheme: {
66 if (color-scheme == ColorScheme.unknown) {
67 return SlintInternal.color-scheme == ColorScheme.dark;
68 }
69 return color-scheme == ColorScheme.dark;
70 }
71}
72
73export global Icons {
74 out property <image> arrow-downward: @image-url("_arrow-downward.svg");
75 out property <image> arrow-drop-down: @image-url("_arrow-drop-down.svg");
76 out property <image> arrow-drop-up: @image-url("_arrow-drop-up.svg");
77 out property <image> arrow-upward: @image-url("_arrow-upward.svg");
78 out property <image> check-mark: @image-url("_check-mark.svg");
79 out property <image> expand-more: @image-url("_expand-more.svg");
80 out property <image> keyboard: @image-url("_keyboard.svg");
81 out property <image> clock: @image-url("_clock.svg");
82 out property <image> arrow-back: @image-url("_arrow_back.svg");
83 out property <image> arrow-forward: @image-url("_arrow_forward.svg");
84 out property <image> edit: @image-url("_edit.svg");
85 out property <image> calendar: @image-url("_calendar.svg");
86}
87
88export global MaterialSizeSettings {
89 out property <length> item-height: 48px;
90}
91