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
4import { ColorSchemeSelector } from "color-scheme.slint";
5
6export struct TextStyle {
7 font-size: relative-font-size,
8 font-weight: int,
9}
10
11export global CosmicFontSettings {
12 out property <int> light-font-weight: 300;
13 out property <int> regular-font-weight: 400;
14 out property <int> semibold-font-weight: 600;
15 out property <TextStyle> body: {
16 font-size: 14 * 0.0769rem,
17 font-weight: regular-font-weight
18 };
19 out property <TextStyle> body-strong: {
20 font-size: 14 * 0.0769rem,
21 font-weight: semibold-font-weight
22 };
23 out property <TextStyle> title: {
24 font-size: 24 * 0.0769rem,
25 font-weight: light-font-weight
26 };
27}
28
29export global CosmicPalette {
30 in-out property <ColorScheme> color-scheme: ColorSchemeSelector.color-scheme;
31 property <bool> dark-color-scheme: {
32 if (color-scheme == ColorScheme.unknown) {
33 return SlintInternal.color-scheme == ColorScheme.dark;
34 }
35 return color-scheme == ColorScheme.dark;
36 }
37
38 // base palette
39 out property <brush> background: dark-color-scheme ? #1B1B1B : #D7D7D7;
40 out property <brush> foreground: dark-color-scheme ? #C4C4C4 : #292929;
41 out property <brush> alternate-background: dark-color-scheme ? #2E2E2E : #F2F2F2;
42 out property <brush> alternate-foreground: dark-color-scheme ? #DEDEDE : #000000E6;
43 out property <brush> control-background: dark-color-scheme ? #262626 : #C7C7C7;
44 out property <brush> control-foreground: dark-color-scheme ? #C4C4C4 : #3D3D3D;
45 out property <brush> accent-background: dark-color-scheme ? #63D0DF : #00525A;
46 out property <brush> accent-foreground: dark-color-scheme ? #161616 : #FFFFFF;
47 out property <brush> selection-background: dark-color-scheme ? #63D0DF : #00525A;
48 out property <brush> selection-foreground: dark-color-scheme ? #161616 : #FFFFFF;
49 out property <brush> border: dark-color-scheme ? #C4C4C433 : #29292933;
50
51 // additional cosmic palette
52 out property <brush> state-hover: #63636333;
53 out property <brush> state-pressed: dark-color-scheme ? #16161680 : #BEBEBE80;
54 out property <brush> state-selected: dark-color-scheme ? #4D4D4D4D : #98989833;
55 out property <brush> state-focus: dark-color-scheme ? #63D0DF : #00525A;
56 out property <brush> alternate-border: dark-color-scheme ? #BEBEBE : #161616;
57 out property <brush> control-divider: dark-color-scheme ? #DEDEDE33 : #3D3D3D33;
58 out property <brush> shadow: dark-color-scheme ? #00000052 : #00000014;
59 out property <brush> accent-text: dark-color-scheme ? #63D0DF : #00525A;
60 out property <brush> placeholder-foreground: dark-color-scheme ? #959595 : #585858;
61 out property <brush> neutral-5-background: #636363;
62 out property <brush> neutral-6-background: dark-color-scheme ? #808080 :#484848;
63
64 out property <brush> control-disabled: dark-color-scheme ? #212121 :#cfcfcf;
65 out property <brush> text-disabled: dark-color-scheme ? #707070 :#808080;
66 out property <brush> secondary-accent-background: dark-color-scheme ? #51a3ae : #367378;
67
68 out property <brush> state: dark-color-scheme ? #ffffff : #000000;
69 out property <brush> state-secondary: dark-color-scheme ? #000000 : #ffffff;
70}
71
72export global Icons {
73 out property <image> arrow-down: @image-url("_arrow_down.svg");
74 out property <image> arrow-up: @image-url("_arrow_up.svg");
75 out property <image> check-mark: @image-url("_check-mark.svg");
76 out property <image> dropdown: @image-url("_pane_down.svg");
77 out property <image> keyboard: @image-url("_keyboard.svg");
78 out property <image> clock: @image-url("_clock.svg");
79 out property <image> arrow-back: @image-url("_arrow_back.svg");
80 out property <image> arrow-forward: @image-url("_arrow_forward.svg");
81 out property <image> edit: @image-url("_edit.svg");
82 out property <image> calendar: @image-url("_calendar.svg");
83}
84
85export global CosmicSizeSettings {
86 out property <length> item-height: 40px;
87}
88