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 CupertinoFontSettings {
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
16 out property <TextStyle> body: {
17 font-size: 13 * 0.0769rem,
18 font-weight: regular-font-weight
19 };
20
21
22 out property <TextStyle> title: {
23 font-size: 28 * 0.0769rem,
24 font-weight: light-font-weight
25 };
26
27 // needed?
28 out property <TextStyle> body-strong: {
29 font-size: 14 * 0.0769rem,
30 font-weight: semibold-font-weight
31 };
32}
33export global CupertinoColors {
34 out property <color> systemGray: #8E8E93;
35 out property <color> systemGray2: #AEAEB2;
36 out property <color> systemGray3: #C7C7CC;
37 out property <color> systemGray4: #D1D1D6;
38 out property <color> systemGray5: #E7E7E7;
39 out property <color> systemGray55: #f0f0f0;
40 out property <color> systemGray6: #F2F2F7;
41 out property <color> white: #FFFFFF;
42 out property <color> systemGray2-dark: #636366;
43 out property <color> systemGray3-dark: #48484A;
44 out property <color> systemGray4-dark: #3A3A3C;
45 out property <color> systemGray5-dark: #2C2C2E;
46 out property <color> systemGray55-dark: #262626;
47 out property <color> systemGray6-dark: #1C1C1E;
48 out property <color> black: #000000;
49
50 out property <color> red: #FF3B30;
51 out property <color> orange: #FF9500;
52 out property <color> yellow: #FFCC00;
53 out property <color> green: #28CD41;
54 out property <color> mint: #00C7BE;
55 out property <color> teal: #59ADC4;
56 out property <color> cyan: #55BEF0;
57 out property <color> blue: #326CCF;
58 out property <color> indigo: #5856D6;
59 out property <color> purple: #AF52DE;
60 out property <color> pink: #FF2D55;
61 out property <color> brown: #A2845E;
62 out property <color> gray: #8E8E93;
63
64 out property <brush> selection-color: self.blue;
65}
66export global CupertinoPalette {
67 in-out property <ColorScheme> color-scheme: ColorSchemeSelector.color-scheme;
68 property <bool> dark-color-scheme: {
69 if (color-scheme == ColorScheme.unknown) {
70 return SlintInternal.color-scheme == ColorScheme.dark;
71 }
72 return color-scheme == ColorScheme.dark;
73 }
74
75 // base palette
76 out property <brush> background: dark-color-scheme ? CupertinoColors.systemGray55-dark: CupertinoColors.systemGray55;
77 out property <brush> foreground: dark-color-scheme ? CupertinoColors.systemGray6 : CupertinoColors.systemGray6-dark;
78 out property <brush> alternate-background: dark-color-scheme ? CupertinoColors.systemGray5-dark : CupertinoColors.systemGray5;
79 out property <brush> alternate-foreground: dark-color-scheme ? CupertinoColors.systemGray5 : CupertinoColors.systemGray5-dark;
80 out property <brush> control-background: dark-color-scheme ? CupertinoColors.systemGray2-dark : CupertinoColors.systemGray6;
81 out property <brush> control-foreground: dark-color-scheme ? CupertinoColors.systemGray4 : CupertinoColors.systemGray5-dark;
82 out property <brush> accent-background: dark-color-scheme ? CupertinoColors.selection-color : CupertinoColors.selection-color;
83 out property <brush> accent-foreground: CupertinoColors.systemGray5;
84 out property <brush> selection-background: dark-color-scheme ? CupertinoColors.selection-color.transparentize(0.5) : CupertinoColors.selection-color.transparentize(0.5);
85 out property <brush> selection-foreground: dark-color-scheme ? CupertinoColors.systemGray6 : CupertinoColors.systemGray6-dark;
86 out property <brush> border: dark-color-scheme ? CupertinoColors.systemGray6.transparentize(0.9) : CupertinoColors.systemGray6-dark.transparentize(0.9);
87
88 // additional palette
89 out property <brush> tertiary-background: dark-color-scheme ? CupertinoColors.systemGray6-dark : CupertinoColors.systemGray6;
90 out property <brush> quaternary-background: dark-color-scheme ? CupertinoColors.systemGray6-dark : CupertinoColors.systemGray6;
91 out property <brush> secondary-accent-background: dark-color-scheme ? CupertinoColors.blue : CupertinoColors.blue;
92 out property <brush> tertiary-accent-background: dark-color-scheme ? CupertinoColors.blue : CupertinoColors.blue;
93 out property <brush> foreground-neg: dark-color-scheme ? CupertinoColors.systemGray6-dark : CupertinoColors.systemGray6;
94 out property <brush> foreground-secondary: dark-color-scheme ? CupertinoColors.systemGray6.transparentize(0.4) : CupertinoColors.systemGray6-dark.transparentize(0.4);
95 out property <brush> secondary-control-background: dark-color-scheme ? CupertinoColors.systemGray : CupertinoColors.systemGray;
96 out property <brush> tertiary-control-background: dark-color-scheme ? CupertinoColors.systemGray5-dark : CupertinoColors.systemGray5;
97 out property <brush> quaternary-control-background: dark-color-scheme ? CupertinoColors.systemGray2-dark : CupertinoColors.systemGray6;
98 out property <brush> alternate-control-background: dark-color-scheme ? CupertinoColors.systemGray3-dark : CupertinoColors.systemGray3;
99 out property <brush> hover: dark-color-scheme ? CupertinoColors.systemGray5-dark : CupertinoColors.systemGray4;
100 out property <brush> pressed: dark-color-scheme ? CupertinoColors.systemGray2 : CupertinoColors.systemGray6;
101 out property <brush> popup-border: dark-color-scheme ? CupertinoColors.systemGray3-dark : CupertinoColors.systemGray6-dark.transparentize(0.9);
102 out property <brush> decent-border: dark-color-scheme ? CupertinoColors.systemGray6-dark.transparentize(0.9) : CupertinoColors.systemGray6.transparentize(0.9);
103 out property <brush> control-background-thumb: dark-color-scheme ? CupertinoColors.systemGray3 : CupertinoColors.systemGray6;
104 out property <brush> separator: dark-color-scheme ? CupertinoColors.systemGray6-dark : CupertinoColors.systemGray4;
105 out property <brush> bar-background: dark-color-scheme ? CupertinoColors.systemGray4-dark : CupertinoColors.systemGray4;
106 out property <brush> bar-border: dark-color-scheme ? @linear-gradient(180deg, CupertinoColors.systemGray4-dark 0%, CupertinoColors.systemGray3-dark 80%, CupertinoColors.systemGray2-dark 100%) : CupertinoColors.systemGray5;
107 out property <brush> inner-border: dark-color-scheme ? CupertinoColors.systemGray5-dark: CupertinoColors.systemGray4;
108 out property <brush> inner-shadow: dark-color-scheme ? CupertinoColors.systemGray5-dark : CupertinoColors.systemGray6;
109
110 out property <brush> state: dark-color-scheme ? CupertinoColors.systemGray6 : CupertinoColors.systemGray6-dark;
111 out property <brush> state-secondary: dark-color-scheme ? CupertinoColors.systemGray6-dark : CupertinoColors.systemGray6;
112
113 // FIXME: dark color
114 out property <brush> dimmer: @linear-gradient(180deg, CupertinoColors.white 100%, CupertinoColors.black 0%);
115}
116
117export global Icons {
118 out property <image> arrow-down: @image-url("_arrow-down.svg");
119 out property <image> arrow-up: @image-url("_arrow-up.svg");
120 out property <image> check-mark: @image-url("_check-mark.svg");
121 out property <image> chevron-down: @image-url("_chevron-down.svg");
122 out property <image> chevron-up: @image-url("_chevron-up.svg");
123 out property <image> down: @image-url("_down.svg");
124 out property <image> dropdown: @image-url("_dropdown.svg");
125 out property <image> left: @image-url("_left.svg");
126 out property <image> right: @image-url("_right.svg");
127 out property <image> up: @image-url("_up.svg");
128 out property <image> keyboard: @image-url("_keyboard.svg");
129 out property <image> clock: @image-url("_clock.svg");
130 out property <image> arrow-back: @image-url("_arrow_back.svg");
131 out property <image> arrow-forward: @image-url("_arrow_forward.svg");
132 out property <image> edit: @image-url("_edit.svg");
133 out property <image> calendar: @image-url("_calendar.svg");
134}
135
136export global CupertinoSizeSettings {
137 out property <length> item-height: 22px;
138}
139