1// Copyright © SixtyFPS GmbH <info@slint.dev>
2// SPDX-License-Identifier: MIT
3
4export struct Palette {
5 // primary
6 slint-blue: brush,
7 pure-black: brush,
8 dark-deep-blue: brush,
9 shark-gray: brush,
10 lemon-green: brush,
11 lemon-green-op10: brush,
12 white: brush,
13 dimmer: brush,
14
15 // slint blue
16 slint-blue-50: brush,
17 slint-blue-100: brush,
18 slint-blue-200: brush,
19 slint-blue-300: brush,
20 slint-blue-400: brush,
21 slint-blue-500: brush,
22 slint-blue-600: brush,
23 slint-blue-700: brush,
24 slint-blue-800: brush,
25 slint-blue-900: brush,
26
27 // lime green
28 lime-green-50: brush,
29 lime-green-100: brush,
30 lime-green-200: brush,
31 lime-green-300: brush,
32 lime-green-400: brush,
33 lime-green-500: brush,
34 lime-green-600: brush,
35 lime-green-700: brush,
36 lime-green-800: brush,
37 lime-green-900: brush,
38
39 // gradients
40 lemon-green-gradient: brush,
41 lemon-green-light-gradient: brush,
42 lemon-green-radial-gradient: brush,
43 slint-blue-gradient: brush,
44 heliotrope-gradient: brush,
45 dark-left-gradient: brush,
46 dark-right-gradient: brush,
47 ebony-radial-gradient: brush,
48 bar-gradient: brush,
49 alternative-bar-gradient: brush,
50 alternative-light-bar-gradient: brush,
51 inverted-bar-gradient: brush,
52 inverted-alternative-bar-gradient: brush,
53 bar-background-gradient: brush,
54 tab-gradient: brush,
55 background-gradient: brush,
56}
57
58export struct Spaces {
59 small: length,
60 medium: length,
61 large: length,
62}
63
64export struct Durations {
65 fast: duration,
66 medium: duration,
67 slow: duration,
68}
69
70struct Font {
71 size: length,
72 weight: float,
73}
74
75export struct Typo {
76 label: Font,
77 label-light: Font,
78 header: Font,
79 header-item: Font,
80 header-item-light: Font,
81 value: Font,
82 description: Font,
83 description-light: Font,
84 value-big: Font,
85}
86
87export global Theme {
88 in property <Palette> palette: {
89 // primary
90 slint-blue: #0025FF,
91 pure-black: #000000,
92 dark-deep-blue: #040708,
93 shark-gray: #2C2F36,
94 lemon-green: #DEFB3A,
95 lemon-green-op10: #defb3a1a,
96 white: #FFFFFF,
97 dimmer: #0000007b,
98
99 // slint blue
100 slint-blue-50: #EEE6FF,
101 slint-blue-100: #D0C3FF,
102 slint-blue-200: #AF9AFF,
103 slint-blue-300: #896FFF,
104 slint-blue-400: #654EFF,
105 slint-blue-500: #2F2AFF,
106 slint-blue-600: #0025FF,
107 slint-blue-700: #001FF7,
108 slint-blue-800: #0019F2,
109 slint-blue-900: #000AEF,
110
111 // lime green
112 lime-green-50: #FBFFE6,
113 lime-green-100: #F4FDC0,
114 lime-green-200: #EBFC93,
115 lime-green-300: #E2FA63,
116 lime-green-400: #DEFB3A,
117 lime-green-500: #D6F800,
118 lime-green-600: #CBE600,
119 lime-green-700: #BBCF00,
120 lime-green-800: #ACB700,
121 lime-green-900: #D9D9D9,
122
123 // gradients
124 lemon-green-gradient: @linear-gradient(135deg, #defb3a75 0%, #defb3a00 100%),
125 lemon-green-light-gradient: @linear-gradient(135deg, #DEFB3A 0%, #defb3a33 100%),
126 lemon-green-radial-gradient: @radial-gradient(circle, #DEFB3A20 0%, #DEFB3A00 100%),
127 slint-blue-gradient: @linear-gradient(135deg, #6c4bff76 0%, #6C4BFF00 100%),
128 heliotrope-gradient: @linear-gradient(180deg, #896fff 0%, #39316B 100%),
129 dark-left-gradient: @linear-gradient(90deg, #040708 0%, #04070875 50%, #04070800 100%),
130 dark-right-gradient: @linear-gradient(90deg, #04070800 0%, #04070875 50%, #040708 100%),
131 ebony-radial-gradient: @radial-gradient(circle, #100F23 0%, #1F1946 100%),
132 bar-gradient: @linear-gradient(180deg, #6C4BFF 0%, #6c4bff00 100%),
133 alternative-bar-gradient: @linear-gradient(180deg, #CBE600 0%, #CBE60000 100%),
134 alternative-light-bar-gradient: @linear-gradient(180deg, #EBFC93 0%, #EBFC9300 100%),
135 inverted-bar-gradient: @linear-gradient(180deg, #6c4bff00 0%, #6C4BFF 100%),
136 inverted-alternative-bar-gradient: @linear-gradient(180deg, #CBE60000 0%, #CBE600 100%),
137 bar-background-gradient: @linear-gradient(180deg, #896FFF 0%, #896FFF00 100%),
138 tab-gradient: @linear-gradient(180deg, #0026ff21 0%, #0026ff01 100%),
139 background-gradient: @radial-gradient(circle, #0026ff40 50%, #0025FF00 100%),
140 };
141
142 in property <Spaces> spaces: {
143 small: 5px,
144 medium: 10px,
145 large: 20px,
146 };
147
148 in property <Durations> durations: {
149 fast: 125ms,
150 medium: 200ms,
151 slow: 500ms,
152 };
153
154 in property <Typo> typo: {
155 label-light: {
156 size: 12px,
157 weight: 400
158 },
159 label: {
160 size: 12px,
161 weight: 500
162 },
163 header: {
164 size: 16px,
165 weight: 600
166 },
167 header-item: {
168 size: 18px,
169 weight: 400
170 },
171 header-item-light: {
172 size: 18px,
173 weight: 200
174 },
175 value: {
176 size: 26px,
177 weight: 500
178 },
179 description: {
180 size: 14px,
181 weight: 400
182 },
183 description-light: {
184 size: 14px,
185 weight: 200
186 },
187 value-big: {
188 size: 40px,
189 weight: 200
190 },
191 };
192}
193
194export enum ScreenSize {
195 EmbeddedSmall,
196 EmbeddedMedium,
197 Mobile,
198 Desktop
199}