Avii/dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1786048673

Browse Source
This commit is contained in:
Avii
2026-08-06 22:37:53 +02:00
parent b700073b17
commit 54ae9fb4c5
161 changed files with 8630 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
ui/components/component_card.slint Normal file
View File

@@ -0,0 +1,42 @@
// Copyright © SixtyFPS GmbH <info@slint.dev>
// SPDX-License-Identifier: MIT
import {
MaterialText,
OutlinedCard,
MaterialTypography,
MaterialStyleMetrics
} from "../material.slint";
export component ComponentCard {
in property <string> title;
HorizontalLayout {
alignment: center;
VerticalLayout {
spacing: 4px;
alignment: start;
MaterialText {
horizontal_alignment: center;
text: root.title;
style: MaterialTypography.title_medium;
}
OutlinedCard {
min-width: 360px;
VerticalLayout {
padding_left: 2px;
padding_right: self.padding_left;
padding_top: MaterialStyleMetrics.padding_8;
padding_bottom: self.padding_top;
spacing: MaterialStyleMetrics.spacing_8;
@children
}
}
}
}
}

31
ui/components/group.slint Normal file
View File

@@ -0,0 +1,31 @@
// Copyright © SixtyFPS GmbH <info@slint.dev>
// SPDX-License-Identifier: MIT
import {
MaterialText,
MaterialPalette,
MaterialTypography
} from "../material.slint";
export component Group {
in property <string> title;
Rectangle {
border_radius: 12px;
background: MaterialPalette.surface_bright;
VerticalLayout {
alignment: start;
padding: 8px;
spacing: 16px;
MaterialText {
horizontal_alignment: center;
text: root.title;
style: MaterialTypography.headline_small;
}
@children
}
}
}

24
ui/components/text_icon_button.slint Normal file
View File

@@ -0,0 +1,24 @@
// Copyright © SixtyFPS GmbH <info@slint.dev>
// SPDX-License-Identifier: MIT
import {
IconButton,
MaterialText
} from "../material.slint";
export component TextIconButton {
in property <image> icon <=> button.icon;
in property <string> text <=> label.text;
VerticalLayout {
HorizontalLayout {
alignment: center;
button := IconButton {}
}
label := MaterialText {
horizontal_alignment: center;
}
}
}

BIN
ui/fonts/Roboto-VariableFont.ttf Normal file
View File

Binary file not shown.

3
ui/fonts/Roboto-VariableFont.ttf.license Normal file
View File

@@ -0,0 +1,3 @@
SPDX-FileCopyrightText: Google Inc. <https://fonts.google.com/specimen/Roboto/about>
SPDX-License-Identifier: Apache-2.0

73
ui/icons.slint Normal file
View File

@@ -0,0 +1,73 @@
// Copyright © SixtyFPS GmbH <info@slint.dev>
// SPDX-License-Identifier: MIT
export global FilledIcons {
out property <image> account_box: @image-url("./icons/filled/account_box.svg");
out property <image> calendar_month: @image-url("./icons/filled/calendar_month.svg");
out property <image> close: @image-url("./icons/filled/close.svg");
out property <image> delete: @image-url("./icons/filled/delete.svg");
out property <image> favorite: @image-url("./icons/filled/favorite.svg");
out property <image> inbox: @image-url("./icons/filled/inbox.svg");
out property <image> music_note: @image-url("./icons/filled/music_note.svg");
out property <image> play_arrow: @image-url("./icons/filled/play_arrow.svg");
out property <image> today: @image-url("./icons/filled/today.svg");
out property <image> add: @image-url("./icons/filled/add.svg");
out property <image> chat_bubble: @image-url("./icons/filled/chat_bubble.svg");
out property <image> edit: @image-url("./icons/filled/edit.svg");
out property <image> group: @image-url("./icons/filled/group.svg");
out property <image> mail: @image-url("./icons/filled/mail.svg");
out property <image> outbox: @image-url("./icons/filled/outbox.svg");
out property <image> search: @image-url("./icons/filled/search.svg");
out property <image> video_chat: @image-url("./icons/filled/video_call.svg");
out property <image> bookmark: @image-url("./icons/filled/bookmark.svg");
out property <image> check: @image-url("./icons/filled/check.svg");
out property <image> explore: @image-url("./icons/filled/explore.svg");
out property <image> image: @image-url("./icons/filled/image.svg");
out property <image> more_vert: @image-url("./icons/filled/more_vert.svg");
out property <image> pets: @image-url("./icons/filled/pets.svg");
out property <image> settings: @image-url("./icons/filled/settings.svg");
out property <image> view_week: @image-url("./icons/filled/view_week.svg");
out property <image> light_mode: @image-url("./icons/filled/light_mode.svg");
out property <image> dark_mode: @image-url("./icons/filled/dark_mode.svg");
out property <image> dashboard: @image-url("./icons/filled/dashboard.svg");
out property <image> pause: @image-url("./icons/filled/pause.svg");
out property <image> archive: @image-url("./icons/filled/archive.svg");
out property <image> share: @image-url("./icons/filled/share.svg");
out property <image> menu: @image-url("./icons/filled/menu.svg");
out property <image> account_circle: @image-url("./icons/filled/account_circle.svg");
}
export global OutlinedIcons {
out property <image> account_box: @image-url("./icons/outlined/account_box.svg");
out property <image> calendar_month: @image-url("./icons/outlined/calendar_month.svg");
out property <image> delete: @image-url("./icons/outlined/delete.svg");
out property <image> favorite: @image-url("./icons/outlined/favorite.svg");
out property <image> inbox: @image-url("./icons/outlined/inbox.svg");
out property <image> music_note: @image-url("./icons/outlined/music_note.svg");
out property <image> play_arrow: @image-url("./icons/outlined/play_arrow.svg");
out property <image> today: @image-url("./icons/outlined/today.svg");
out property <image> add: @image-url("./icons/outlined/add.svg");
out property <image> chat_bubble: @image-url("./icons/outlined/chat_bubble.svg");
out property <image> edit: @image-url("./icons/outlined/edit.svg");
out property <image> group: @image-url("./icons/outlined/group.svg");
out property <image> mail: @image-url("./icons/outlined/mail.svg");
out property <image> outbox: @image-url("./icons/outlined/outbox.svg");
out property <image> search: @image-url("./icons/outlined/search.svg");
out property <image> video_chat: @image-url("./icons/outlined/video_chat.svg");
out property <image> bookmark: @image-url("./icons/outlined/bookmark.svg");
out property <image> check: @image-url("./icons/outlined/check.svg");
out property <image> explore: @image-url("./icons/outlined/explore.svg");
out property <image> image: @image-url("./icons/outlined/image.svg");
out property <image> more_vert: @image-url("./icons/outlined/more_vert.svg");
out property <image> pets: @image-url("./icons/outlined/pets.svg");
out property <image> settings: @image-url("./icons/outlined/settings.svg");
out property <image> view_week: @image-url("./icons/outlined/view_week.svg");
out property <image> light_mode: @image-url("./icons/outlined/light_mode.svg");
out property <image> dark_mode: @image-url("./icons/outlined/dark_mode.svg");
out property <image> dashboard: @image-url("./icons/outlined/dashboard.svg");
out property <image> pause: @image-url("./icons/outlined/pause.svg");
out property <image> archive: @image-url("./icons/outlined/archive.svg");
out property <image> share: @image-url("./icons/outlined/share.svg");
out property <image> schedule: @image-url("./icons/outlined/schedule.svg");
out property <image> palette: @image-url("./icons/outlined/palette.svg");
}

1
ui/icons/filled/account_box.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 3c1.93 0 3.5 1.57 3.5 3.5S13.93 13 12 13s-3.5-1.57-3.5-3.5S10.07 6 12 6zm7 13H5v-.23c0-.62.28-1.2.76-1.58C7.47 15.82 9.64 15 12 15s4.53.82 6.24 2.19c.48.38.76.97.76 1.58V19z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 354 B

1
ui/icons/filled/account_circle.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 4c1.93 0 3.5 1.57 3.5 3.5S13.93 13 12 13s-3.5-1.57-3.5-3.5S10.07 6 12 6zm0 14c-2.03 0-4.43-.82-6.14-2.88a9.947 9.947 0 0 1 12.28 0C16.43 19.18 14.03 20 12 20z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 329 B

1
ui/icons/filled/add.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 136 B

1
ui/icons/filled/archive.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="m20.54 5.23-1.39-1.68C18.88 3.21 18.47 3 18 3H6c-.47 0-.88.21-1.16.55L3.46 5.23C3.17 5.57 3 6.02 3 6.5V19c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V6.5c0-.48-.17-.93-.46-1.27zM12 17.5 6.5 12H10v-2h4v2h3.5L12 17.5zM5.12 5l.81-1h12l.94 1H5.12z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 332 B

1
ui/icons/filled/bookmark.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M17 3H7c-1.1 0-1.99.9-1.99 2L5 21l7-3 7 3V5c0-1.1-.9-2-2-2z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 160 B

1
ui/icons/filled/calendar_month.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 4h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 20a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V10h14v10zM9 14H7v-2h2v2zm4 0h-2v-2h2v2zm4 0h-2v-2h2v2zm-8 4H7v-2h2v2zm4 0h-2v-2h2v2zm4 0h-2v-2h2v2z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 310 B

1
ui/icons/filled/chat_bubble.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 167 B

1
ui/icons/filled/check.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 150 B

1
ui/icons/filled/close.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 203 B

1
ui/icons/filled/dark_mode.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 3a9 9 0 1 0 9 9c0-.46-.04-.92-.1-1.36a5.389 5.389 0 0 1-4.4 2.26 5.403 5.403 0 0 1-3.14-9.8c-.44-.06-.9-.1-1.36-.1z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 220 B

1
ui/icons/filled/dashboard.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 162 B

1
ui/icons/filled/delete.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 178 B

1
ui/icons/filled/edit.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a.996.996 0 0 0 0-1.41l-2.34-2.34a.996.996 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 246 B

1
ui/icons/filled/explore.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 10.9c-.61 0-1.1.49-1.1 1.1s.49 1.1 1.1 1.1c.61 0 1.1-.49 1.1-1.1s-.49-1.1-1.1-1.1zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm2.19 12.19L6 18l3.81-8.19L18 6l-3.81 8.19z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 296 B

1
ui/icons/filled/favorite.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="m12 21.35-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 274 B

1
ui/icons/filled/group.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 390 B

1
ui/icons/filled/image.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 221 B

1
ui/icons/filled/inbox.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 3H4.99c-1.11 0-1.98.89-1.98 2L3 19c0 1.1.88 2 1.99 2H19c1.1 0 2-.9 2-2V5a2 2 0 0 0-2-2zm0 12h-4c0 1.66-1.35 3-3 3s-3-1.34-3-3H4.99V5H19v10z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 244 B

1
ui/icons/filled/light_mode.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zM2 13h2c.55 0 1-.45 1-1s-.45-1-1-1H2c-.55 0-1 .45-1 1s.45 1 1 1zm18 0h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1s.45 1 1 1zM11 2v2c0 .55.45 1 1 1s1-.45 1-1V2c0-.55-.45-1-1-1s-1 .45-1 1zm0 18v2c0 .55.45 1 1 1s1-.45 1-1v-2c0-.55-.45-1-1-1s-1 .45-1 1zM5.99 4.58a.996.996 0 0 0-1.41 0 .996.996 0 0 0 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0s.39-1.03 0-1.41L5.99 4.58zm12.37 12.37a.996.996 0 0 0-1.41 0 .996.996 0 0 0 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0a.996.996 0 0 0 0-1.41l-1.06-1.06zm1.06-10.96a.996.996 0 0 0 0-1.41.996.996 0 0 0-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06zM7.05 18.36a.996.996 0 0 0 0-1.41.996.996 0 0 0-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 878 B

1
ui/icons/filled/mail.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4-8 5-8-5V6l8 5 8-5v2z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 209 B

1
ui/icons/filled/menu.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 147 B

1
ui/icons/filled/more_vert.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 246 B

1
ui/icons/filled/music_note.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 186 B

1
ui/icons/filled/outbox.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 3H4.99c-1.11 0-1.98.9-1.98 2L3 19c0 1.1.88 2 1.99 2H19c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 12h-4c0 1.66-1.35 3-3 3s-3-1.34-3-3H4.99V5H19v10zM8 11h2v3h4v-3h2l-4-4-4 4z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 270 B

1
ui/icons/filled/pause.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 132 B

1
ui/icons/filled/pets.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><circle cx="4.5" cy="9.5" r="2.5"/><circle cx="9" cy="5.5" r="2.5"/><circle cx="15" cy="5.5" r="2.5"/><circle cx="19.5" cy="9.5" r="2.5"/><path d="M17.34 14.86c-.87-1.02-1.6-1.89-2.48-2.91-.46-.54-1.05-1.08-1.75-1.32-.11-.04-.22-.07-.33-.09-.25-.04-.52-.04-.78-.04s-.53 0-.79.05c-.11.02-.22.05-.33.09-.7.24-1.28.78-1.75 1.32-.87 1.02-1.6 1.89-2.48 2.91-1.31 1.31-2.92 2.76-2.62 4.79.29 1.02 1.02 2.03 2.33 2.32.73.15 3.06-.44 5.54-.44h.18c2.48 0 4.81.58 5.54.44 1.31-.29 2.04-1.31 2.33-2.32.31-2.04-1.3-3.49-2.61-4.8z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 609 B

1
ui/icons/filled/play_arrow.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 114 B

1
ui/icons/filled/search.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 303 B

1
ui/icons/filled/settings.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58a.49.49 0 0 0 .12-.61l-1.92-3.32a.488.488 0 0 0-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54a.484.484 0 0 0-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58a.49.49 0 0 0-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 793 B

1
ui/icons/filled/share.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 460 B

1
ui/icons/filled/today.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 231 B

1
ui/icons/filled/video_call.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4zM14 13h-3v3H9v-3H6v-2h3V8h2v3h3v2z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 236 B

1
ui/icons/filled/view_week.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M5.33 20H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2h1.33c1.1 0 2 .9 2 2v12a2 2 0 0 1-2 2zM22 18V6c0-1.1-.9-2-2-2h-1.33c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2H20a2 2 0 0 0 2-2zm-7.33 0V6c0-1.1-.9-2-2-2h-1.33c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h1.33c1.1 0 2-.9 2-2z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 346 B

1
ui/icons/outlined/account_box.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 16H7v-.24C8.42 17.62 10.16 17 12 17s3.58.62 5 1.76V19zm2-1.14C17.2 16.09 14.73 15 12 15s-5.2 1.09-7 2.86V5h14v12.86zM12 13c1.93 0 3.5-1.57 3.5-3.5S13.93 6 12 6 8.5 7.57 8.5 9.5 10.07 13 12 13zm0-5c.83 0 1.5.67 1.5 1.5S12.83 11 12 11s-1.5-.67-1.5-1.5S11.17 8 12 8z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 444 B

1
ui/icons/outlined/add.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 136 B

1
ui/icons/outlined/archive.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="m20.54 5.23-1.39-1.68C18.88 3.21 18.47 3 18 3H6c-.47 0-.88.21-1.16.55L3.46 5.23C3.17 5.57 3 6.02 3 6.5V19c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V6.5c0-.48-.17-.93-.46-1.27zM6.24 5h11.52l.81.97H5.44l.8-.97zM5 19V8h14v11H5zm8.45-9h-2.9v3H8l4 4 4-4h-2.55z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 346 B

1
ui/icons/outlined/bookmark.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M17 3H7c-1.1 0-2 .9-2 2v16l7-3 7 3V5c0-1.1-.9-2-2-2z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 153 B

1
ui/icons/outlined/calendar_month.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 4h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 20a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V10h14v10zm0-12H5V6h14v2zM9 14H7v-2h2v2zm4 0h-2v-2h2v2zm4 0h-2v-2h2v2zm-8 4H7v-2h2v2zm4 0h-2v-2h2v2zm4 0h-2v-2h2v2z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 325 B

1
ui/icons/outlined/chat_bubble.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 167 B

1
ui/icons/outlined/check.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 158 B

1
ui/icons/outlined/dark_mode.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M9.37 5.51A7.35 7.35 0 0 0 9.1 7.5c0 4.08 3.32 7.4 7.4 7.4.68 0 1.35-.09 1.99-.27A7.014 7.014 0 0 1 12 19c-3.86 0-7-3.14-7-7 0-2.93 1.81-5.45 4.37-6.49zM12 3a9 9 0 1 0 9 9c0-.46-.04-.92-.1-1.36a5.389 5.389 0 0 1-4.4 2.26 5.403 5.403 0 0 1-3.14-9.8c-.44-.06-.9-.1-1.36-.1z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 372 B

1
ui/icons/outlined/dashboard.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 5v2h-4V5h4M9 5v6H5V5h4m10 8v6h-4v-6h4M9 17v2H5v-2h4M21 3h-8v6h8V3zM11 3H3v10h8V3zm10 8h-8v10h8V11zm-10 4H3v6h8v-6z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 219 B

1
ui/icons/outlined/delete.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M16 9v10H8V9h8m-1.5-6h-5l-1 1H5v2h14V4h-3.5l-1-1zM18 7H6v12c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 194 B

1
ui/icons/outlined/edit.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="m14.06 9.02.92.92L5.92 19H5v-.92l9.06-9.06M17.66 3c-.25 0-.51.1-.7.29l-1.83 1.83 3.75 3.75 1.83-1.83a.996.996 0 0 0 0-1.41l-2.34-2.34c-.2-.2-.45-.29-.71-.29zm-3.6 3.19L3 17.25V21h3.75L17.81 9.94l-3.75-3.75z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 307 B

1
ui/icons/outlined/explore.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5 7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 351 B

1
ui/icons/outlined/favorite.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="m12 21.35-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 274 B

1
ui/icons/outlined/group.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M9 13.75c-2.34 0-7 1.17-7 3.5V19h14v-1.75c0-2.33-4.66-3.5-7-3.5zM4.34 17c.84-.58 2.87-1.25 4.66-1.25s3.82.67 4.66 1.25H4.34zM9 12c1.93 0 3.5-1.57 3.5-3.5S10.93 5 9 5 5.5 6.57 5.5 8.5 7.07 12 9 12zm0-5c.83 0 1.5.67 1.5 1.5S9.83 10 9 10s-1.5-.67-1.5-1.5S8.17 7 9 7zm7.04 6.81c1.16.84 1.96 1.96 1.96 3.44V19h4v-1.75c0-2.02-3.5-3.17-5.96-3.44zM15 12c1.93 0 3.5-1.57 3.5-3.5S16.93 5 15 5c-.54 0-1.04.13-1.5.35.63.89 1 1.98 1 3.15s-.37 2.26-1 3.15c.46.22.96.35 1.5.35z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 563 B

1
ui/icons/outlined/image.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4.86 8.86-3 3.87L9 13.14 6 17h12l-3.86-5.14z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 237 B

1
ui/icons/outlined/inbox.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 3H5c-1.1 0-2 .9-2 2v14a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5v-3h3.56c.69 1.19 1.97 2 3.45 2s2.75-.81 3.45-2H19v3zm0-5h-4.99c0 1.1-.9 2-2 2s-2-.9-2-2H5V5h14v9z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 282 B

1
ui/icons/outlined/light_mode.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 9c1.65 0 3 1.35 3 3s-1.35 3-3 3-3-1.35-3-3 1.35-3 3-3m0-2c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zM2 13h2c.55 0 1-.45 1-1s-.45-1-1-1H2c-.55 0-1 .45-1 1s.45 1 1 1zm18 0h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1s.45 1 1 1zM11 2v2c0 .55.45 1 1 1s1-.45 1-1V2c0-.55-.45-1-1-1s-1 .45-1 1zm0 18v2c0 .55.45 1 1 1s1-.45 1-1v-2c0-.55-.45-1-1-1s-1 .45-1 1zM5.99 4.58a.996.996 0 0 0-1.41 0 .996.996 0 0 0 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0s.39-1.03 0-1.41L5.99 4.58zm12.37 12.37a.996.996 0 0 0-1.41 0 .996.996 0 0 0 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0a.996.996 0 0 0 0-1.41l-1.06-1.06zm1.06-10.96a.996.996 0 0 0 0-1.41.996.996 0 0 0-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06zM7.05 18.36a.996.996 0 0 0 0-1.41.996.996 0 0 0-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 934 B

1
ui/icons/outlined/mail.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M22 6c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6zm-2 0-8 4.99L4 6h16zm0 12H4V8l8 5 8-5v10z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 218 B

1
ui/icons/outlined/more_vert.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 246 B

1
ui/icons/outlined/music_note.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="m12 3 .01 10.55c-.59-.34-1.27-.55-2-.55a4.001 4.001 0 1 0 0 8c2.22 0 3.99-1.79 3.99-4V7h4V3h-6zm-1.99 16c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 249 B

1
ui/icons/outlined/outbox.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M11 9.83V14h2V9.83l1.59 1.58L16 10l-4-4-4 4 1.41 1.41z"/><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5v-3h3.02c.91 1.21 2.35 2 3.98 2s3.06-.79 3.98-2H19v3zm0-5h-4.18c-.41 1.16-1.51 2-2.82 2s-2.4-.84-2.82-2H5V5h14v9z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 363 B

1
ui/icons/outlined/palette.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#1f1f1f"><path d="M480-80q-82 0-155-31.5t-127.5-86Q143-252 111.5-325T80-480q0-83 32.5-156t88-127Q256-817 330-848.5T488-880q80 0 151 27.5t124.5 76q53.5 48.5 85 115T880-518q0 115-70 176.5T640-280h-74q-9 0-12.5 5t-3.5 11q0 12 15 34.5t15 51.5q0 50-27.5 74T480-80Zm0-400Zm-220 40q26 0 43-17t17-43q0-26-17-43t-43-17q-26 0-43 17t-17 43q0 26 17 43t43 17Zm120-160q26 0 43-17t17-43q0-26-17-43t-43-17q-26 0-43 17t-17 43q0 26 17 43t43 17Zm200 0q26 0 43-17t17-43q0-26-17-43t-43-17q-26 0-43 17t-17 43q0 26 17 43t43 17Zm120 160q26 0 43-17t17-43q0-26-17-43t-43-17q-26 0-43 17t-17 43q0 26 17 43t43 17ZM480-160q9 0 14.5-5t5.5-13q0-14-15-33t-15-57q0-42 29-67t71-25h70q66 0 113-38.5T800-518q0-121-92.5-201.5T488-800q-136 0-232 93t-96 227q0 133 93.5 226.5T480-160Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 850 B

1
ui/icons/outlined/pause.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 132 B

1
ui/icons/outlined/pets.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><circle cx="4.5" cy="9.5" r="2.5"/><circle cx="9" cy="5.5" r="2.5"/><circle cx="15" cy="5.5" r="2.5"/><circle cx="19.5" cy="9.5" r="2.5"/><path d="M17.34 14.86c-.87-1.02-1.6-1.89-2.48-2.91-.46-.54-1.05-1.08-1.75-1.32-.11-.04-.22-.07-.33-.09-.25-.04-.52-.04-.78-.04s-.53 0-.79.05c-.11.02-.22.05-.33.09-.7.24-1.28.78-1.75 1.32-.87 1.02-1.6 1.89-2.48 2.91-1.31 1.31-2.92 2.76-2.62 4.79.29 1.02 1.02 2.03 2.33 2.32.73.15 3.06-.44 5.54-.44h.18c2.48 0 4.81.58 5.54.44 1.31-.29 2.04-1.31 2.33-2.32.31-2.04-1.3-3.49-2.61-4.8z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 609 B

1
ui/icons/outlined/play_arrow.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 8.64 15.27 12 10 15.36V8.64M8 5v14l11-7L8 5z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 149 B

1
ui/icons/outlined/schedule.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#e3e3e3"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 342 B

1
ui/icons/outlined/search.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 303 B

1
ui/icons/outlined/settings.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19.43 12.98c.04-.32.07-.64.07-.98 0-.34-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46a.5.5 0 0 0-.61-.22l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65A.488.488 0 0 0 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1a.566.566 0 0 0-.18-.03c-.17 0-.34.09-.43.25l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98 0 .33.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46a.5.5 0 0 0 .61.22l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.06.02.12.03.18.03.17 0 .34-.09.43-.25l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zm-1.98-1.71c.04.31.05.52.05.73 0 .21-.02.43-.05.73l-.14 1.13.89.7 1.08.84-.7 1.21-1.27-.51-1.04-.42-.9.68c-.43.32-.84.56-1.25.73l-1.06.43-.16 1.13-.2 1.35h-1.4l-.19-1.35-.16-1.13-1.06-.43c-.43-.18-.83-.41-1.23-.71l-.91-.7-1.06.43-1.27.51-.7-1.21 1.08-.84.89-.7-.14-1.13c-.03-.31-.05-.54-.05-.74s.02-.43.05-.73l.14-1.13-.89-.7-1.08-.84.7-1.21 1.27.51 1.04.42.9-.68c.43-.32.84-.56 1.25-.73l1.06-.43.16-1.13.2-1.35h1.39l.19 1.35.16 1.13 1.06.43c.43.18.83.41 1.23.71l.91.7 1.06-.43 1.27-.51.7 1.21-1.07.85-.89.7.14 1.13zM12 8c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 6c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

1
ui/icons/outlined/share.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92s2.92-1.31 2.92-2.92c0-1.61-1.31-2.92-2.92-2.92zM18 4c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zM6 13c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm12 7.02c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 621 B

1
ui/icons/outlined/today.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 3h-1V1h-2v2H8V1H6v2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V9h14v10zm0-12H5V5h14v2zM7 11h5v5H7z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 236 B

1
ui/icons/outlined/video_chat.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H5.17L4 17.17V4h16v12z"/><path d="M8 14h6c.55 0 1-.45 1-1v-1.99L17 13V7l-2 1.99V7c0-.55-.45-1-1-1H8c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 313 B

1
ui/icons/outlined/view_week.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zM8 18H4V6h4v12zm6 0h-4V6h4v12zm6 0h-4V6h4v12z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 222 B

BIN
ui/images/blue-hint.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 5.6 KiB

BIN
ui/images/dial-frame.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 31 KiB

BIN
ui/images/dial-trim.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 19 KiB

BIN
ui/images/indicator.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 268 B

BIN
ui/images/light-hole.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 338 B

BIN
ui/images/light.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.3 KiB

BIN
ui/images/metal-dial.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 35 KiB

BIN
ui/images/metal-lights.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 57 KiB

BIN
ui/images/slint-logo-square-dark.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 4.1 KiB

47
ui/main.slint
View File

@@ -2,6 +2,12 @@
// SPDX-License-Identifier: MIT
import { LineEdit } from "std-widgets.slint";
import { ComponentCard } from "./components/component_card.slint";
import { Horizontal, Vertical, Switch } from "./material.slint";
import "./fonts/Roboto-VariableFont.ttf";
import { FilledIcons, OutlinedIcons } from "./icons.slint";
// The window the user interacts with. Edits to the inputs propagate to
// the SystemTrayIcon instance via the host language's callbacks.
@@ -9,11 +15,12 @@ export component MainWindow inherits Window {
title: "Dashboard";
preferred-width: 1024px;
preferred-height: 600px;
default-font-family: "Roboto";
in-out property <int> current-page: 0;
in property <string> text: "Hello World";
in property <string> next-event-label: "NEXT EVENT";
in property <string> next-event-title: "LOADING CALENDAR LORUM IPSUM DOLOR SIT AMET";
in property <string> next-event-title: "LOADING CALENDAR";
in property <string> next-event-time: "6:00 pm";
callback user-activity();
@@ -75,4 +82,42 @@ export component MainWindow inherits Window {
horizontal-alignment: right;
vertical-alignment: center;
}
Rectangle {
x: 38px;
y: 32px + 36px + 5px;
width: (root.width / 2) - 38px;
height: root.height - 32px + 36px + 5px;
ComponentCard {
title: "Switches";
Vertical {
Horizontal {
alignment: space_around;
Switch {}
Switch {
off_icon: FilledIcons.close;
on_icon: FilledIcons.check;
}
}
Horizontal {
alignment: space_around;
Switch {
enabled: false;
}
Switch {
enabled: false;
on_icon: FilledIcons.check;
off_icon: FilledIcons.close;
}
}
}
}
}
}

66
ui/material.slint Normal file
View File

@@ -0,0 +1,66 @@
// Copyright © SixtyFPS GmbH <info@slint.dev>
// SPDX-License-Identifier: MIT
// components
export { AppBar, SmallAppBar, MediumAppBar, LargeAppBar } from "./ui/components/app_bar.slint";
export { Badge } from "./ui/components/badge.slint";
export { BottomAppBar } from "./ui/components/bottom_app_bar.slint";
export { CheckState, CheckBox, CheckBoxTile } from "./ui/components/check_box.slint";
export { ActionChip, FilterChip, InputChip } from "./ui/components/chip.slint";
export { DatePickerPopup, DatePickerAdapter } from "./ui/components/date_picker.slint";
export { Dialog, FullscreenDialog } from "./ui/components/dialog.slint";
export { Drawer, ModalDrawer } from "./ui/components/drawer.slint";
export { DropDownMenu } from "./ui/components/drop_down_menu.slint";
export { VerticalDivider, HorizontalDivider } from "./ui/components/divider.slint";
export { ModalBottomSheet } from "./ui/components/bottom_sheet.slint";
export { ElevatedCard, FilledCard, OutlinedCard } from "./ui/components/card.slint";
export { ElevatedButton } from "./ui/components/elevated_button.slint";
export { Elevation } from "./ui/components/elevation.slint";
export { ExtendedTouchArea } from "./ui/components/extended_touch_area.slint";
export { FilledButton } from "./ui/components/filled_button.slint";
export { FilledIconButton } from "./ui/components/filled_icon_button.slint";
export { FloatingActionButton, FABStyle } from "./ui/components/floating_action_button.slint";
export { Grid } from "./ui/components/grid.slint";
export { Horizontal } from "./ui/components/horizontal.slint";
export { Icon } from "./ui/components/icon.slint";
export { IconButton } from "./ui/components/icon_button.slint";
export { OutlineButton } from "./ui/components/outline_button.slint";
export { OutlineIconButton } from "./ui/components/outline_icon_button.slint";
export { Avatar, ListTile } from "./ui/components/list.slint";
export { ListView } from "./ui/components/list_view.slint";
export { MaterialText } from "./ui/components/material_text.slint";
export { MaterialWindow, MaterialWindowAdapter } from "./ui/components/material_window.slint";
export { PopupMenu } from "./ui/components/menu.slint";
export { NavigationBar } from "./ui/components/navigation_bar.slint";
export { NavigationDrawer, ModalNavigationDrawer } from "./ui/components/navigation_drawer.slint";
export { NavigationRail } from "./ui/components/navigation_rail.slint";
export { CircularProgressIndicator, LinearProgressIndicator } from "./ui/components/progress_indicator.slint";
export { RadioButton, RadioButtonTile } from "./ui/components/radio_button.slint";
export { SearchBar } from "./ui/components/search_bar.slint";
export { ScrollView } from "./ui/components/scroll_view.slint";
export { Slider } from "./ui/components/slider.slint";
export { SnackBar } from "./ui/components/snack_bar.slint";
export { StateLayerArea, StateLayer, Ripple } from "./ui/components/state_layer.slint";
export { SegmentedButton } from "./ui/components/segmented_button.slint";
export { Switch } from "./ui/components/switch.slint";
export { TabBar, SecondaryTabBar } from "./ui/components/tab_bar.slint";
export { TextButton } from "./ui/components/text_button.slint";
export { TextField } from "./ui/components/text_field.slint";
export { TimePickerPopup, Time } from "./ui/components/time_picker.slint";
export { TonalButton } from "./ui/components/tonal_button.slint";
export { TonalIconButton } from "./ui/components/tonal_icon_button.slint";
export { ToolTip } from "./ui/components/tooltip.slint";
export { Vertical } from "./ui/components/vertical.slint";
export { Modal } from "./ui/components/modal.slint";
// items
export { ListItem } from "./ui/items/list_item.slint";
export { NavigationItem, NavigationGroup } from "./ui/items/navigation_item.slint";
export { MenuItem } from "./ui/items/menu_item.slint";
// styles
export { MaterialAnimations } from "./ui/styling/material_animations.slint";
export { MaterialScheme, MaterialSchemes } from "./ui/styling/material_schemes.slint";
export { MaterialStyleMetrics } from "./ui/styling/material_style_metrics.slint";
export { MaterialPalette } from "./ui/styling/material_palette.slint";
export { MaterialTypography } from "./ui/styling/material_typography.slint";

418
ui/themes/material_green_theme.json Normal file
View File

@@ -0,0 +1,418 @@
{
"description": "TYPE: CUSTOM\nMaterial Theme Builder export 2025-08-29 10:20:31",
"seed": "#63A002",
"coreColors": {
"primary": "#63A002"
},
"extendedColors": [],
"schemes": {
"light": {
"primary": "#4C662B",
"surfaceTint": "#4C662B",
"onPrimary": "#FFFFFF",
"primaryContainer": "#CDEDA3",
"onPrimaryContainer": "#354E16",
"secondary": "#586249",
"onSecondary": "#FFFFFF",
"secondaryContainer": "#DCE7C8",
"onSecondaryContainer": "#404A33",
"tertiary": "#386663",
"onTertiary": "#FFFFFF",
"tertiaryContainer": "#BCECE7",
"onTertiaryContainer": "#1F4E4B",
"error": "#BA1A1A",
"onError": "#FFFFFF",
"errorContainer": "#FFDAD6",
"onErrorContainer": "#93000A",
"background": "#F9FAEF",
"onBackground": "#1A1C16",
"surface": "#F9FAEF",
"onSurface": "#1A1C16",
"surfaceVariant": "#E1E4D5",
"onSurfaceVariant": "#44483D",
"outline": "#75796C",
"outlineVariant": "#C5C8BA",
"shadow": "#000000",
"scrim": "#000000",
"inverseSurface": "#2F312A",
"inverseOnSurface": "#F1F2E6",
"inversePrimary": "#B1D18A",
"primaryFixed": "#CDEDA3",
"onPrimaryFixed": "#102000",
"primaryFixedDim": "#B1D18A",
"onPrimaryFixedVariant": "#354E16",
"secondaryFixed": "#DCE7C8",
"onSecondaryFixed": "#151E0B",
"secondaryFixedDim": "#BFCBAD",
"onSecondaryFixedVariant": "#404A33",
"tertiaryFixed": "#BCECE7",
"onTertiaryFixed": "#00201E",
"tertiaryFixedDim": "#A0D0CB",
"onTertiaryFixedVariant": "#1F4E4B",
"surfaceDim": "#DADBD0",
"surfaceBright": "#F9FAEF",
"surfaceContainerLowest": "#FFFFFF",
"surfaceContainerLow": "#F3F4E9",
"surfaceContainer": "#EEEFE3",
"surfaceContainerHigh": "#E8E9DE",
"surfaceContainerHighest": "#E2E3D8"
},
"light-medium-contrast": {
"primary": "#253D05",
"surfaceTint": "#4C662B",
"onPrimary": "#FFFFFF",
"primaryContainer": "#5A7539",
"onPrimaryContainer": "#FFFFFF",
"secondary": "#303924",
"onSecondary": "#FFFFFF",
"secondaryContainer": "#667157",
"onSecondaryContainer": "#FFFFFF",
"tertiary": "#083D3A",
"onTertiary": "#FFFFFF",
"tertiaryContainer": "#477572",
"onTertiaryContainer": "#FFFFFF",
"error": "#740006",
"onError": "#FFFFFF",
"errorContainer": "#CF2C27",
"onErrorContainer": "#FFFFFF",
"background": "#F9FAEF",
"onBackground": "#1A1C16",
"surface": "#F9FAEF",
"onSurface": "#0F120C",
"surfaceVariant": "#E1E4D5",
"onSurfaceVariant": "#34382D",
"outline": "#505449",
"outlineVariant": "#6B6F62",
"shadow": "#000000",
"scrim": "#000000",
"inverseSurface": "#2F312A",
"inverseOnSurface": "#F1F2E6",
"inversePrimary": "#B1D18A",
"primaryFixed": "#5A7539",
"onPrimaryFixed": "#FFFFFF",
"primaryFixedDim": "#425C23",
"onPrimaryFixedVariant": "#FFFFFF",
"secondaryFixed": "#667157",
"onSecondaryFixed": "#FFFFFF",
"secondaryFixedDim": "#4E5840",
"onSecondaryFixedVariant": "#FFFFFF",
"tertiaryFixed": "#477572",
"onTertiaryFixed": "#FFFFFF",
"tertiaryFixedDim": "#2E5C59",
"onTertiaryFixedVariant": "#FFFFFF",
"surfaceDim": "#C6C7BD",
"surfaceBright": "#F9FAEF",
"surfaceContainerLowest": "#FFFFFF",
"surfaceContainerLow": "#F3F4E9",
"surfaceContainer": "#E8E9DE",
"surfaceContainerHigh": "#DCDED3",
"surfaceContainerHighest": "#D1D3C8"
},
"light-high-contrast": {
"primary": "#1C3200",
"surfaceTint": "#4C662B",
"onPrimary": "#FFFFFF",
"primaryContainer": "#375018",
"onPrimaryContainer": "#FFFFFF",
"secondary": "#262F1A",
"onSecondary": "#FFFFFF",
"secondaryContainer": "#434C35",
"onSecondaryContainer": "#FFFFFF",
"tertiary": "#003230",
"onTertiary": "#FFFFFF",
"tertiaryContainer": "#21504E",
"onTertiaryContainer": "#FFFFFF",
"error": "#600004",
"onError": "#FFFFFF",
"errorContainer": "#98000A",
"onErrorContainer": "#FFFFFF",
"background": "#F9FAEF",
"onBackground": "#1A1C16",
"surface": "#F9FAEF",
"onSurface": "#000000",
"surfaceVariant": "#E1E4D5",
"onSurfaceVariant": "#000000",
"outline": "#2A2D24",
"outlineVariant": "#474B40",
"shadow": "#000000",
"scrim": "#000000",
"inverseSurface": "#2F312A",
"inverseOnSurface": "#FFFFFF",
"inversePrimary": "#B1D18A",
"primaryFixed": "#375018",
"onPrimaryFixed": "#FFFFFF",
"primaryFixedDim": "#213903",
"onPrimaryFixedVariant": "#FFFFFF",
"secondaryFixed": "#434C35",
"onSecondaryFixed": "#FFFFFF",
"secondaryFixedDim": "#2C3620",
"onSecondaryFixedVariant": "#FFFFFF",
"tertiaryFixed": "#21504E",
"onTertiaryFixed": "#FFFFFF",
"tertiaryFixedDim": "#033937",
"onTertiaryFixedVariant": "#FFFFFF",
"surfaceDim": "#B8BAAF",
"surfaceBright": "#F9FAEF",
"surfaceContainerLowest": "#FFFFFF",
"surfaceContainerLow": "#F1F2E6",
"surfaceContainer": "#E2E3D8",
"surfaceContainerHigh": "#D4D5CA",
"surfaceContainerHighest": "#C6C7BD"
},
"dark": {
"primary": "#B1D18A",
"surfaceTint": "#B1D18A",
"onPrimary": "#1F3701",
"primaryContainer": "#354E16",
"onPrimaryContainer": "#CDEDA3",
"secondary": "#BFCBAD",
"onSecondary": "#2A331E",
"secondaryContainer": "#404A33",
"onSecondaryContainer": "#DCE7C8",
"tertiary": "#A0D0CB",
"onTertiary": "#003735",
"tertiaryContainer": "#1F4E4B",
"onTertiaryContainer": "#BCECE7",
"error": "#FFB4AB",
"onError": "#690005",
"errorContainer": "#93000A",
"onErrorContainer": "#FFDAD6",
"background": "#12140E",
"onBackground": "#E2E3D8",
"surface": "#12140E",
"onSurface": "#E2E3D8",
"surfaceVariant": "#44483D",
"onSurfaceVariant": "#C5C8BA",
"outline": "#8F9285",
"outlineVariant": "#44483D",
"shadow": "#000000",
"scrim": "#000000",
"inverseSurface": "#E2E3D8",
"inverseOnSurface": "#2F312A",
"inversePrimary": "#4C662B",
"primaryFixed": "#CDEDA3",
"onPrimaryFixed": "#102000",
"primaryFixedDim": "#B1D18A",
"onPrimaryFixedVariant": "#354E16",
"secondaryFixed": "#DCE7C8",
"onSecondaryFixed": "#151E0B",
"secondaryFixedDim": "#BFCBAD",
"onSecondaryFixedVariant": "#404A33",
"tertiaryFixed": "#BCECE7",
"onTertiaryFixed": "#00201E",
"tertiaryFixedDim": "#A0D0CB",
"onTertiaryFixedVariant": "#1F4E4B",
"surfaceDim": "#12140E",
"surfaceBright": "#383A32",
"surfaceContainerLowest": "#0C0F09",
"surfaceContainerLow": "#1A1C16",
"surfaceContainer": "#1E201A",
"surfaceContainerHigh": "#282B24",
"surfaceContainerHighest": "#33362E"
},
"dark-medium-contrast": {
"primary": "#C7E79E",
"surfaceTint": "#B1D18A",
"onPrimary": "#172B00",
"primaryContainer": "#7D9A59",
"onPrimaryContainer": "#000000",
"secondary": "#D5E1C2",
"onSecondary": "#1F2814",
"secondaryContainer": "#8A9579",
"onSecondaryContainer": "#000000",
"tertiary": "#B5E6E1",
"onTertiary": "#002B29",
"tertiaryContainer": "#6B9995",
"onTertiaryContainer": "#000000",
"error": "#FFD2CC",
"onError": "#540003",
"errorContainer": "#FF5449",
"onErrorContainer": "#000000",
"background": "#12140E",
"onBackground": "#E2E3D8",
"surface": "#12140E",
"onSurface": "#FFFFFF",
"surfaceVariant": "#44483D",
"onSurfaceVariant": "#DBDECF",
"outline": "#B0B3A6",
"outlineVariant": "#8E9285",
"shadow": "#000000",
"scrim": "#000000",
"inverseSurface": "#E2E3D8",
"inverseOnSurface": "#282B24",
"inversePrimary": "#364F17",
"primaryFixed": "#CDEDA3",
"onPrimaryFixed": "#081400",
"primaryFixedDim": "#B1D18A",
"onPrimaryFixedVariant": "#253D05",
"secondaryFixed": "#DCE7C8",
"onSecondaryFixed": "#0B1403",
"secondaryFixedDim": "#BFCBAD",
"onSecondaryFixedVariant": "#303924",
"tertiaryFixed": "#BCECE7",
"onTertiaryFixed": "#001413",
"tertiaryFixedDim": "#A0D0CB",
"onTertiaryFixedVariant": "#083D3A",
"surfaceDim": "#12140E",
"surfaceBright": "#43453D",
"surfaceContainerLowest": "#060804",
"surfaceContainerLow": "#1C1E18",
"surfaceContainer": "#262922",
"surfaceContainerHigh": "#31342C",
"surfaceContainerHighest": "#3C3F37"
},
"dark-high-contrast": {
"primary": "#DAFBB0",
"surfaceTint": "#B1D18A",
"onPrimary": "#000000",
"primaryContainer": "#ADCD86",
"onPrimaryContainer": "#050E00",
"secondary": "#E9F4D5",
"onSecondary": "#000000",
"secondaryContainer": "#BCC7A9",
"onSecondaryContainer": "#060D01",
"tertiary": "#C9F9F5",
"onTertiary": "#000000",
"tertiaryContainer": "#9CCCC7",
"onTertiaryContainer": "#000E0D",
"error": "#FFECE9",
"onError": "#000000",
"errorContainer": "#FFAEA4",
"onErrorContainer": "#220001",
"background": "#12140E",
"onBackground": "#E2E3D8",
"surface": "#12140E",
"onSurface": "#FFFFFF",
"surfaceVariant": "#44483D",
"onSurfaceVariant": "#FFFFFF",
"outline": "#EEF2E2",
"outlineVariant": "#C1C4B6",
"shadow": "#000000",
"scrim": "#000000",
"inverseSurface": "#E2E3D8",
"inverseOnSurface": "#000000",
"inversePrimary": "#364F17",
"primaryFixed": "#CDEDA3",
"onPrimaryFixed": "#000000",
"primaryFixedDim": "#B1D18A",
"onPrimaryFixedVariant": "#081400",
"secondaryFixed": "#DCE7C8",
"onSecondaryFixed": "#000000",
"secondaryFixedDim": "#BFCBAD",
"onSecondaryFixedVariant": "#0B1403",
"tertiaryFixed": "#BCECE7",
"onTertiaryFixed": "#000000",
"tertiaryFixedDim": "#A0D0CB",
"onTertiaryFixedVariant": "#001413",
"surfaceDim": "#12140E",
"surfaceBright": "#4F5149",
"surfaceContainerLowest": "#000000",
"surfaceContainerLow": "#1E201A",
"surfaceContainer": "#2F312A",
"surfaceContainerHigh": "#3A3C35",
"surfaceContainerHighest": "#454840"
}
},
"palettes": {
"primary": {
"0": "#000000",
"5": "#081400",
"10": "#102000",
"15": "#172B00",
"20": "#1F3700",
"25": "#264300",
"30": "#2F4F00",
"35": "#375C00",
"40": "#3F6900",
"50": "#518500",
"60": "#64A104",
"70": "#7DBD2A",
"80": "#97D945",
"90": "#B2F65F",
"95": "#D2FF9B",
"98": "#F0FFD7",
"99": "#F9FFE9",
"100": "#FFFFFF"
},
"secondary": {
"0": "#000000",
"5": "#081400",
"10": "#121F04",
"15": "#1C2A0B",
"20": "#263515",
"25": "#31401F",
"30": "#3C4C2A",
"35": "#485734",
"40": "#54643F",
"50": "#6C7D56",
"60": "#85976E",
"70": "#A0B187",
"80": "#BBCDA1",
"90": "#D7E9BB",
"95": "#E5F7C9",
"98": "#F0FFD7",
"99": "#F9FFE9",
"100": "#FFFFFF"
},
"tertiary": {
"0": "#000000",
"5": "#001413",
"10": "#00201E",
"15": "#002B29",
"20": "#003735",
"25": "#004340",
"30": "#00504C",
"35": "#005D59",
"40": "#046A66",
"50": "#30837F",
"60": "#4D9D98",
"70": "#69B8B3",
"80": "#85D4CF",
"90": "#A1F1EB",
"95": "#B0FFF9",
"98": "#E3FFFC",
"99": "#F2FFFD",
"100": "#FFFFFF"
},
"neutral": {
"0": "#000000",
"5": "#10110D",
"10": "#1B1C18",
"15": "#252622",
"20": "#30312C",
"25": "#3B3C37",
"30": "#464742",
"35": "#52534D",
"40": "#5E5F59",
"50": "#777771",
"60": "#91918B",
"70": "#ABACA5",
"80": "#C7C7C0",
"90": "#E3E3DB",
"95": "#F2F1E9",
"98": "#FAFAF2",
"99": "#FDFCF5",
"100": "#FFFFFF"
},
"neutral-variant": {
"0": "#000000",
"5": "#0E120A",
"10": "#191D14",
"15": "#23271D",
"20": "#2E3228",
"25": "#393D32",
"30": "#44483D",
"35": "#505449",
"40": "#5C6054",
"50": "#75796C",
"60": "#8F9285",
"70": "#A9AD9F",
"80": "#C5C8BA",
"90": "#E1E4D5",
"95": "#EFF2E3",
"98": "#F8FBEB",
"99": "#FBFEEE",
"100": "#FFFFFF"
}
}
}

429
ui/themes/material_purple_theme.json Normal file
View File

@@ -0,0 +1,429 @@
{
"description": "TYPE: CUSTOM\nMaterial Theme Builder export 2025-08-28 04:01:30",
"seed": "#6750A4",
"coreColors": {
"primary": "#6750A4",
"secondary": "#958DA4",
"tertiary": "#B58392",
"neutral": "#938F94",
"neutralVariant": "#948F99"
},
"extendedColors": [
{
"name": "Custom Color 1",
"color": "#166EA6",
"description": "",
"harmonized": false
}
],
"schemes": {
"light": {
"primary": "#65558F",
"surfaceTint": "#65558F",
"onPrimary": "#FFFFFF",
"primaryContainer": "#E9DDFF",
"onPrimaryContainer": "#4D3D75",
"secondary": "#65558F",
"onSecondary": "#FFFFFF",
"secondaryContainer": "#E9DDFF",
"onSecondaryContainer": "#4D3D75",
"tertiary": "#8B4A61",
"onTertiary": "#FFFFFF",
"tertiaryContainer": "#FFD9E3",
"onTertiaryContainer": "#6F3349",
"error": "#BA1A1A",
"onError": "#FFFFFF",
"errorContainer": "#FFDAD6",
"onErrorContainer": "#93000A",
"background": "#FDF7FF",
"onBackground": "#1D1B20",
"surface": "#FEF7FF",
"onSurface": "#1D1B20",
"surfaceVariant": "#E7E0EB",
"onSurfaceVariant": "#49454E",
"outline": "#7A757F",
"outlineVariant": "#CAC4CF",
"shadow": "#000000",
"scrim": "#000000",
"inverseSurface": "#322F35",
"inverseOnSurface": "#F5EFF7",
"inversePrimary": "#CFBDFE",
"primaryFixed": "#E9DDFF",
"onPrimaryFixed": "#201047",
"primaryFixedDim": "#CFBDFE",
"onPrimaryFixedVariant": "#4D3D75",
"secondaryFixed": "#E9DDFF",
"onSecondaryFixed": "#210F47",
"secondaryFixedDim": "#D0BCFE",
"onSecondaryFixedVariant": "#4D3D75",
"tertiaryFixed": "#FFD9E3",
"onTertiaryFixed": "#3A071E",
"tertiaryFixedDim": "#FFB0C9",
"onTertiaryFixedVariant": "#6F3349",
"surfaceDim": "#DED8E0",
"surfaceBright": "#FEF7FF",
"surfaceContainerLowest": "#FFFFFF",
"surfaceContainerLow": "#F8F1FA",
"surfaceContainer": "#F2ECF4",
"surfaceContainerHigh": "#ECE6EE",
"surfaceContainerHighest": "#E7E0E8"
},
"light-medium-contrast": {
"primary": "#3C2D63",
"surfaceTint": "#65558F",
"onPrimary": "#FFFFFF",
"primaryContainer": "#74649F",
"onPrimaryContainer": "#FFFFFF",
"secondary": "#3C2C63",
"onSecondary": "#FFFFFF",
"secondaryContainer": "#74649E",
"onSecondaryContainer": "#FFFFFF",
"tertiary": "#5B2238",
"onTertiary": "#FFFFFF",
"tertiaryContainer": "#9C5870",
"onTertiaryContainer": "#FFFFFF",
"error": "#740006",
"onError": "#FFFFFF",
"errorContainer": "#CF2C27",
"onErrorContainer": "#FFFFFF",
"background": "#FDF7FF",
"onBackground": "#1D1B20",
"surface": "#FEF7FF",
"onSurface": "#121016",
"surfaceVariant": "#E7E0EB",
"onSurfaceVariant": "#38353D",
"outline": "#55515A",
"outlineVariant": "#706B75",
"shadow": "#000000",
"scrim": "#000000",
"inverseSurface": "#322F35",
"inverseOnSurface": "#F5EFF7",
"inversePrimary": "#CFBDFE",
"primaryFixed": "#74649F",
"onPrimaryFixed": "#FFFFFF",
"primaryFixedDim": "#5B4C84",
"onPrimaryFixedVariant": "#FFFFFF",
"secondaryFixed": "#74649E",
"onSecondaryFixed": "#FFFFFF",
"secondaryFixedDim": "#5B4B84",
"onSecondaryFixedVariant": "#FFFFFF",
"tertiaryFixed": "#9C5870",
"onTertiaryFixed": "#FFFFFF",
"tertiaryFixedDim": "#804057",
"onTertiaryFixedVariant": "#FFFFFF",
"surfaceDim": "#CAC5CC",
"surfaceBright": "#FEF7FF",
"surfaceContainerLowest": "#FFFFFF",
"surfaceContainerLow": "#F8F1FA",
"surfaceContainer": "#ECE6EE",
"surfaceContainerHigh": "#E1DBE3",
"surfaceContainerHighest": "#D5D0D8"
},
"light-high-contrast": {
"primary": "#312259",
"surfaceTint": "#65558F",
"onPrimary": "#FFFFFF",
"primaryContainer": "#4F4078",
"onPrimaryContainer": "#FFFFFF",
"secondary": "#322258",
"onSecondary": "#FFFFFF",
"secondaryContainer": "#504078",
"onSecondaryContainer": "#FFFFFF",
"tertiary": "#4F182E",
"onTertiary": "#FFFFFF",
"tertiaryContainer": "#72354C",
"onTertiaryContainer": "#FFFFFF",
"error": "#600004",
"onError": "#FFFFFF",
"errorContainer": "#98000A",
"onErrorContainer": "#FFFFFF",
"background": "#FDF7FF",
"onBackground": "#1D1B20",
"surface": "#FEF7FF",
"onSurface": "#000000",
"surfaceVariant": "#E7E0EB",
"onSurfaceVariant": "#000000",
"outline": "#2E2B33",
"outlineVariant": "#4B4851",
"shadow": "#000000",
"scrim": "#000000",
"inverseSurface": "#322F35",
"inverseOnSurface": "#FFFFFF",
"inversePrimary": "#CFBDFE",
"primaryFixed": "#4F4078",
"onPrimaryFixed": "#FFFFFF",
"primaryFixedDim": "#382960",
"onPrimaryFixedVariant": "#FFFFFF",
"secondaryFixed": "#504078",
"onSecondaryFixed": "#FFFFFF",
"secondaryFixedDim": "#38295F",
"onSecondaryFixedVariant": "#FFFFFF",
"tertiaryFixed": "#72354C",
"onTertiaryFixed": "#FFFFFF",
"tertiaryFixedDim": "#571F35",
"onTertiaryFixedVariant": "#FFFFFF",
"surfaceDim": "#BCB7BF",
"surfaceBright": "#FEF7FF",
"surfaceContainerLowest": "#FFFFFF",
"surfaceContainerLow": "#F5EFF7",
"surfaceContainer": "#E7E0E8",
"surfaceContainerHigh": "#D8D2DA",
"surfaceContainerHighest": "#CAC5CC"
},
"dark": {
"primary": "#CFBDFE",
"surfaceTint": "#CFBDFE",
"onPrimary": "#36275D",
"primaryContainer": "#4D3D75",
"onPrimaryContainer": "#E9DDFF",
"secondary": "#D0BCFE",
"onSecondary": "#36265D",
"secondaryContainer": "#4D3D75",
"onSecondaryContainer": "#E9DDFF",
"tertiary": "#FFB0C9",
"onTertiary": "#541D33",
"tertiaryContainer": "#6F3349",
"onTertiaryContainer": "#FFD9E3",
"error": "#FFB4AB",
"onError": "#690005",
"errorContainer": "#93000A",
"onErrorContainer": "#FFDAD6",
"background": "#141218",
"onBackground": "#E6E0E9",
"surface": "#141218",
"onSurface": "#E7E0E8",
"surfaceVariant": "#49454E",
"onSurfaceVariant": "#CAC4CF",
"outline": "#948F99",
"outlineVariant": "#49454E",
"shadow": "#000000",
"scrim": "#000000",
"inverseSurface": "#E7E0E8",
"inverseOnSurface": "#322F35",
"inversePrimary": "#65558F",
"primaryFixed": "#E9DDFF",
"onPrimaryFixed": "#201047",
"primaryFixedDim": "#CFBDFE",
"onPrimaryFixedVariant": "#4D3D75",
"secondaryFixed": "#E9DDFF",
"onSecondaryFixed": "#210F47",
"secondaryFixedDim": "#D0BCFE",
"onSecondaryFixedVariant": "#4D3D75",
"tertiaryFixed": "#FFD9E3",
"onTertiaryFixed": "#3A071E",
"tertiaryFixedDim": "#FFB0C9",
"onTertiaryFixedVariant": "#6F3349",
"surfaceDim": "#141218",
"surfaceBright": "#3B383E",
"surfaceContainerLowest": "#0F0D13",
"surfaceContainerLow": "#1D1B20",
"surfaceContainer": "#211F24",
"surfaceContainerHigh": "#2B292F",
"surfaceContainerHighest": "#36343A"
},
"dark-medium-contrast": {
"primary": "#E3D6FF",
"surfaceTint": "#CFBDFE",
"onPrimary": "#2B1B52",
"primaryContainer": "#9887C5",
"onPrimaryContainer": "#000000",
"secondary": "#E3D6FF",
"onSecondary": "#2B1B51",
"secondaryContainer": "#9987C5",
"onSecondaryContainer": "#000000",
"tertiary": "#FFD0DD",
"onTertiary": "#471228",
"tertiaryContainer": "#C57B93",
"onTertiaryContainer": "#000000",
"error": "#FFD2CC",
"onError": "#540003",
"errorContainer": "#FF5449",
"onErrorContainer": "#000000",
"background": "#141218",
"onBackground": "#E6E0E9",
"surface": "#141218",
"onSurface": "#FFFFFF",
"surfaceVariant": "#49454E",
"onSurfaceVariant": "#E0DAE5",
"outline": "#B5B0BB",
"outlineVariant": "#938E99",
"shadow": "#000000",
"scrim": "#000000",
"inverseSurface": "#E7E0E8",
"inverseOnSurface": "#2B292F",
"inversePrimary": "#4E3F77",
"primaryFixed": "#E9DDFF",
"onPrimaryFixed": "#16033D",
"primaryFixedDim": "#CFBDFE",
"onPrimaryFixedVariant": "#3C2D63",
"secondaryFixed": "#E9DDFF",
"onSecondaryFixed": "#16033D",
"secondaryFixedDim": "#D0BCFE",
"onSecondaryFixedVariant": "#3C2C63",
"tertiaryFixed": "#FFD9E3",
"onTertiaryFixed": "#2B0013",
"tertiaryFixedDim": "#FFB0C9",
"onTertiaryFixedVariant": "#5B2238",
"surfaceDim": "#141218",
"surfaceBright": "#46434A",
"surfaceContainerLowest": "#08070B",
"surfaceContainerLow": "#1F1D22",
"surfaceContainer": "#29272D",
"surfaceContainerHigh": "#343138",
"surfaceContainerHighest": "#3F3C43"
},
"dark-high-contrast": {
"primary": "#F5EDFF",
"surfaceTint": "#CFBDFE",
"onPrimary": "#000000",
"primaryContainer": "#CBB9FA",
"onPrimaryContainer": "#0F0033",
"secondary": "#F5EDFF",
"onSecondary": "#000000",
"secondaryContainer": "#CCB9FA",
"onSecondaryContainer": "#100032",
"tertiary": "#FFEBEF",
"onTertiary": "#000000",
"tertiaryContainer": "#FEABC5",
"onTertiaryContainer": "#20000D",
"error": "#FFECE9",
"onError": "#000000",
"errorContainer": "#FFAEA4",
"onErrorContainer": "#220001",
"background": "#141218",
"onBackground": "#E6E0E9",
"surface": "#141218",
"onSurface": "#FFFFFF",
"surfaceVariant": "#49454E",
"onSurfaceVariant": "#FFFFFF",
"outline": "#F4EDF9",
"outlineVariant": "#C6C0CB",
"shadow": "#000000",
"scrim": "#000000",
"inverseSurface": "#E7E0E8",
"inverseOnSurface": "#000000",
"inversePrimary": "#4E3F77",
"primaryFixed": "#E9DDFF",
"onPrimaryFixed": "#000000",
"primaryFixedDim": "#CFBDFE",
"onPrimaryFixedVariant": "#16033D",
"secondaryFixed": "#E9DDFF",
"onSecondaryFixed": "#000000",
"secondaryFixedDim": "#D0BCFE",
"onSecondaryFixedVariant": "#16033D",
"tertiaryFixed": "#FFD9E3",
"onTertiaryFixed": "#000000",
"tertiaryFixedDim": "#FFB0C9",
"onTertiaryFixedVariant": "#2B0013",
"surfaceDim": "#141218",
"surfaceBright": "#524F55",
"surfaceContainerLowest": "#000000",
"surfaceContainerLow": "#211F24",
"surfaceContainer": "#322F35",
"surfaceContainerHigh": "#3D3A40",
"surfaceContainerHighest": "#49454C"
}
},
"palettes": {
"primary": {
"0": "#000000",
"5": "#160041",
"10": "#22005D",
"15": "#2D1067",
"20": "#381E72",
"25": "#432B7E",
"30": "#4F378A",
"35": "#5B4397",
"40": "#6750A4",
"50": "#8069BF",
"60": "#9A83DB",
"70": "#B69DF7",
"80": "#CFBCFF",
"90": "#E9DDFF",
"95": "#F6EEFF",
"98": "#FDF7FF",
"99": "#FFFBFF",
"100": "#FFFFFF"
},
"secondary": {
"0": "#000000",
"5": "#130E1F",
"10": "#1E192B",
"15": "#282335",
"20": "#332D40",
"25": "#3E384C",
"30": "#4A4458",
"35": "#564F64",
"40": "#625B70",
"50": "#7B748A",
"60": "#958DA4",
"70": "#B0A7BF",
"80": "#CCC2DB",
"90": "#E8DEF8",
"95": "#F6EDFF",
"98": "#FEF7FF",
"99": "#FFFBFF",
"100": "#FFFFFF"
},
"tertiary": {
"0": "#000000",
"5": "#240612",
"10": "#31101D",
"15": "#3D1B27",
"20": "#4A2532",
"25": "#56303D",
"30": "#633B48",
"35": "#704654",
"40": "#7E5260",
"50": "#996A78",
"60": "#B58392",
"70": "#D29DAC",
"80": "#EFB8C8",
"90": "#FFD9E3",
"95": "#FFECF0",
"98": "#FFF8F8",
"99": "#FFFBFF",
"100": "#FFFFFF"
},
"neutral": {
"0": "#000000",
"5": "#111111",
"10": "#1C1B1B",
"15": "#262526",
"20": "#313030",
"25": "#3C3B3B",
"30": "#484646",
"35": "#545252",
"40": "#605E5E",
"50": "#797676",
"60": "#939090",
"70": "#AEAAAA",
"80": "#C9C6C5",
"90": "#E6E1E1",
"95": "#F4F0EF",
"98": "#FDF8F8",
"99": "#FFFBFF",
"100": "#FFFFFF"
},
"neutral-variant": {
"0": "#000000",
"5": "#111112",
"10": "#1C1B1C",
"15": "#262526",
"20": "#313031",
"25": "#3C3B3C",
"30": "#484647",
"35": "#545253",
"40": "#605E5F",
"50": "#797677",
"60": "#939091",
"70": "#AEAAAB",
"80": "#C9C5C6",
"90": "#E6E1E2",
"95": "#F4F0F0",
"98": "#FDF8F9",
"99": "#FFFBFF",
"100": "#FFFFFF"
}
}
}

418
ui/themes/material_red_theme.json Normal file
View File

@@ -0,0 +1,418 @@
{
"description": "TYPE: CUSTOM\nMaterial Theme Builder export 2025-08-29 10:19:37",
"seed": "#B33B15",
"coreColors": {
"primary": "#B33B15"
},
"extendedColors": [],
"schemes": {
"light": {
"primary": "#8F4C38",
"surfaceTint": "#8F4C38",
"onPrimary": "#FFFFFF",
"primaryContainer": "#FFDBD1",
"onPrimaryContainer": "#723523",
"secondary": "#77574E",
"onSecondary": "#FFFFFF",
"secondaryContainer": "#FFDBD1",
"onSecondaryContainer": "#5D4037",
"tertiary": "#6C5D2F",
"onTertiary": "#FFFFFF",
"tertiaryContainer": "#F5E1A7",
"onTertiaryContainer": "#534619",
"error": "#BA1A1A",
"onError": "#FFFFFF",
"errorContainer": "#FFDAD6",
"onErrorContainer": "#93000A",
"background": "#FFF8F6",
"onBackground": "#231917",
"surface": "#FFF8F6",
"onSurface": "#231917",
"surfaceVariant": "#F5DED8",
"onSurfaceVariant": "#53433F",
"outline": "#85736E",
"outlineVariant": "#D8C2BC",
"shadow": "#000000",
"scrim": "#000000",
"inverseSurface": "#392E2B",
"inverseOnSurface": "#FFEDE8",
"inversePrimary": "#FFB5A0",
"primaryFixed": "#FFDBD1",
"onPrimaryFixed": "#3A0B01",
"primaryFixedDim": "#FFB5A0",
"onPrimaryFixedVariant": "#723523",
"secondaryFixed": "#FFDBD1",
"onSecondaryFixed": "#2C150F",
"secondaryFixedDim": "#E7BDB2",
"onSecondaryFixedVariant": "#5D4037",
"tertiaryFixed": "#F5E1A7",
"onTertiaryFixed": "#231B00",
"tertiaryFixedDim": "#D8C58D",
"onTertiaryFixedVariant": "#534619",
"surfaceDim": "#E8D6D2",
"surfaceBright": "#FFF8F6",
"surfaceContainerLowest": "#FFFFFF",
"surfaceContainerLow": "#FFF1ED",
"surfaceContainer": "#FCEAE5",
"surfaceContainerHigh": "#F7E4E0",
"surfaceContainerHighest": "#F1DFDA"
},
"light-medium-contrast": {
"primary": "#5D2514",
"surfaceTint": "#8F4C38",
"onPrimary": "#FFFFFF",
"primaryContainer": "#A15A45",
"onPrimaryContainer": "#FFFFFF",
"secondary": "#4B2F28",
"onSecondary": "#FFFFFF",
"secondaryContainer": "#87655C",
"onSecondaryContainer": "#FFFFFF",
"tertiary": "#41350A",
"onTertiary": "#FFFFFF",
"tertiaryContainer": "#7B6C3C",
"onTertiaryContainer": "#FFFFFF",
"error": "#740006",
"onError": "#FFFFFF",
"errorContainer": "#CF2C27",
"onErrorContainer": "#FFFFFF",
"background": "#FFF8F6",
"onBackground": "#231917",
"surface": "#FFF8F6",
"onSurface": "#180F0D",
"surfaceVariant": "#F5DED8",
"onSurfaceVariant": "#41332F",
"outline": "#5F4F4A",
"outlineVariant": "#7B6964",
"shadow": "#000000",
"scrim": "#000000",
"inverseSurface": "#392E2B",
"inverseOnSurface": "#FFEDE8",
"inversePrimary": "#FFB5A0",
"primaryFixed": "#A15A45",
"onPrimaryFixed": "#FFFFFF",
"primaryFixedDim": "#84422F",
"onPrimaryFixedVariant": "#FFFFFF",
"secondaryFixed": "#87655C",
"onSecondaryFixed": "#FFFFFF",
"secondaryFixedDim": "#6D4D45",
"onSecondaryFixedVariant": "#FFFFFF",
"tertiaryFixed": "#7B6C3C",
"onTertiaryFixed": "#FFFFFF",
"tertiaryFixedDim": "#615426",
"onTertiaryFixedVariant": "#FFFFFF",
"surfaceDim": "#D4C3BE",
"surfaceBright": "#FFF8F6",
"surfaceContainerLowest": "#FFFFFF",
"surfaceContainerLow": "#FFF1ED",
"surfaceContainer": "#F7E4E0",
"surfaceContainerHigh": "#EBD9D4",
"surfaceContainerHighest": "#DFCEC9"
},
"light-high-contrast": {
"primary": "#501B0B",
"surfaceTint": "#8F4C38",
"onPrimary": "#FFFFFF",
"primaryContainer": "#753725",
"onPrimaryContainer": "#FFFFFF",
"secondary": "#3F261E",
"onSecondary": "#FFFFFF",
"secondaryContainer": "#60423A",
"onSecondaryContainer": "#FFFFFF",
"tertiary": "#362B02",
"onTertiary": "#FFFFFF",
"tertiaryContainer": "#55481C",
"onTertiaryContainer": "#FFFFFF",
"error": "#600004",
"onError": "#FFFFFF",
"errorContainer": "#98000A",
"onErrorContainer": "#FFFFFF",
"background": "#FFF8F6",
"onBackground": "#231917",
"surface": "#FFF8F6",
"onSurface": "#000000",
"surfaceVariant": "#F5DED8",
"onSurfaceVariant": "#000000",
"outline": "#372925",
"outlineVariant": "#554641",
"shadow": "#000000",
"scrim": "#000000",
"inverseSurface": "#392E2B",
"inverseOnSurface": "#FFFFFF",
"inversePrimary": "#FFB5A0",
"primaryFixed": "#753725",
"onPrimaryFixed": "#FFFFFF",
"primaryFixedDim": "#592111",
"onPrimaryFixedVariant": "#FFFFFF",
"secondaryFixed": "#60423A",
"onSecondaryFixed": "#FFFFFF",
"secondaryFixedDim": "#472C24",
"onSecondaryFixedVariant": "#FFFFFF",
"tertiaryFixed": "#55481C",
"onTertiaryFixed": "#FFFFFF",
"tertiaryFixedDim": "#3D3206",
"onTertiaryFixedVariant": "#FFFFFF",
"surfaceDim": "#C6B5B1",
"surfaceBright": "#FFF8F6",
"surfaceContainerLowest": "#FFFFFF",
"surfaceContainerLow": "#FFEDE8",
"surfaceContainer": "#F1DFDA",
"surfaceContainerHigh": "#E2D1CC",
"surfaceContainerHighest": "#D4C3BE"
},
"dark": {
"primary": "#FFB5A0",
"surfaceTint": "#FFB5A0",
"onPrimary": "#561F0F",
"primaryContainer": "#723523",
"onPrimaryContainer": "#FFDBD1",
"secondary": "#E7BDB2",
"onSecondary": "#442A22",
"secondaryContainer": "#5D4037",
"onSecondaryContainer": "#FFDBD1",
"tertiary": "#D8C58D",
"onTertiary": "#3B2F05",
"tertiaryContainer": "#534619",
"onTertiaryContainer": "#F5E1A7",
"error": "#FFB4AB",
"onError": "#690005",
"errorContainer": "#93000A",
"onErrorContainer": "#FFDAD6",
"background": "#1A110F",
"onBackground": "#F1DFDA",
"surface": "#1A110F",
"onSurface": "#F1DFDA",
"surfaceVariant": "#53433F",
"onSurfaceVariant": "#D8C2BC",
"outline": "#A08C87",
"outlineVariant": "#53433F",
"shadow": "#000000",
"scrim": "#000000",
"inverseSurface": "#F1DFDA",
"inverseOnSurface": "#392E2B",
"inversePrimary": "#8F4C38",
"primaryFixed": "#FFDBD1",
"onPrimaryFixed": "#3A0B01",
"primaryFixedDim": "#FFB5A0",
"onPrimaryFixedVariant": "#723523",
"secondaryFixed": "#FFDBD1",
"onSecondaryFixed": "#2C150F",
"secondaryFixedDim": "#E7BDB2",
"onSecondaryFixedVariant": "#5D4037",
"tertiaryFixed": "#F5E1A7",
"onTertiaryFixed": "#231B00",
"tertiaryFixedDim": "#D8C58D",
"onTertiaryFixedVariant": "#534619",
"surfaceDim": "#1A110F",
"surfaceBright": "#423734",
"surfaceContainerLowest": "#140C0A",
"surfaceContainerLow": "#231917",
"surfaceContainer": "#271D1B",
"surfaceContainerHigh": "#322825",
"surfaceContainerHighest": "#3D322F"
},
"dark-medium-contrast": {
"primary": "#FFD2C6",
"surfaceTint": "#FFB5A0",
"onPrimary": "#481506",
"primaryContainer": "#CB7C65",
"onPrimaryContainer": "#000000",
"secondary": "#FED3C7",
"onSecondary": "#381F18",
"secondaryContainer": "#AE887E",
"onSecondaryContainer": "#000000",
"tertiary": "#EFDBA1",
"onTertiary": "#2F2500",
"tertiaryContainer": "#A0905C",
"onTertiaryContainer": "#000000",
"error": "#FFD2CC",
"onError": "#540003",
"errorContainer": "#FF5449",
"onErrorContainer": "#000000",
"background": "#1A110F",
"onBackground": "#F1DFDA",
"surface": "#1A110F",
"onSurface": "#FFFFFF",
"surfaceVariant": "#53433F",
"onSurfaceVariant": "#EED7D1",
"outline": "#C2ADA8",
"outlineVariant": "#A08C87",
"shadow": "#000000",
"scrim": "#000000",
"inverseSurface": "#F1DFDA",
"inverseOnSurface": "#322825",
"inversePrimary": "#743624",
"primaryFixed": "#FFDBD1",
"onPrimaryFixed": "#280500",
"primaryFixedDim": "#FFB5A0",
"onPrimaryFixedVariant": "#5D2514",
"secondaryFixed": "#FFDBD1",
"onSecondaryFixed": "#200B06",
"secondaryFixedDim": "#E7BDB2",
"onSecondaryFixedVariant": "#4B2F28",
"tertiaryFixed": "#F5E1A7",
"onTertiaryFixed": "#171100",
"tertiaryFixedDim": "#D8C58D",
"onTertiaryFixedVariant": "#41350A",
"surfaceDim": "#1A110F",
"surfaceBright": "#4E423F",
"surfaceContainerLowest": "#0D0604",
"surfaceContainerLow": "#251B19",
"surfaceContainer": "#302623",
"surfaceContainerHigh": "#3B302D",
"surfaceContainerHighest": "#463B38"
},
"dark-high-contrast": {
"primary": "#FFECE7",
"surfaceTint": "#FFB5A0",
"onPrimary": "#000000",
"primaryContainer": "#FFAF98",
"onPrimaryContainer": "#1E0300",
"secondary": "#FFECE7",
"onSecondary": "#000000",
"secondaryContainer": "#E3B9AE",
"onSecondaryContainer": "#190603",
"tertiary": "#FFEFC4",
"onTertiary": "#000000",
"tertiaryContainer": "#D4C289",
"onTertiaryContainer": "#100B00",
"error": "#FFECE9",
"onError": "#000000",
"errorContainer": "#FFAEA4",
"onErrorContainer": "#220001",
"background": "#1A110F",
"onBackground": "#F1DFDA",
"surface": "#1A110F",
"onSurface": "#FFFFFF",
"surfaceVariant": "#53433F",
"onSurfaceVariant": "#FFFFFF",
"outline": "#FFECE7",
"outlineVariant": "#D4BEB8",
"shadow": "#000000",
"scrim": "#000000",
"inverseSurface": "#F1DFDA",
"inverseOnSurface": "#000000",
"inversePrimary": "#743624",
"primaryFixed": "#FFDBD1",
"onPrimaryFixed": "#000000",
"primaryFixedDim": "#FFB5A0",
"onPrimaryFixedVariant": "#280500",
"secondaryFixed": "#FFDBD1",
"onSecondaryFixed": "#000000",
"secondaryFixedDim": "#E7BDB2",
"onSecondaryFixedVariant": "#200B06",
"tertiaryFixed": "#F5E1A7",
"onTertiaryFixed": "#000000",
"tertiaryFixedDim": "#D8C58D",
"onTertiaryFixedVariant": "#171100",
"surfaceDim": "#1A110F",
"surfaceBright": "#5A4D4A",
"surfaceContainerLowest": "#000000",
"surfaceContainerLow": "#271D1B",
"surfaceContainer": "#392E2B",
"surfaceContainerHigh": "#443936",
"surfaceContainerHighest": "#504441"
}
},
"palettes": {
"primary": {
"0": "#000000",
"5": "#280500",
"10": "#3B0900",
"15": "#4D0F00",
"20": "#5F1500",
"25": "#731B00",
"30": "#862200",
"35": "#9A2902",
"40": "#AB350F",
"50": "#CD4D26",
"60": "#EF663D",
"70": "#FF8B69",
"80": "#FFB5A0",
"90": "#FFDBD1",
"95": "#FFEDE8",
"98": "#FFF8F6",
"99": "#FFFBFF",
"100": "#FFFFFF"
},
"secondary": {
"0": "#000000",
"5": "#240803",
"10": "#311309",
"15": "#3E1C13",
"20": "#4A271C",
"25": "#573126",
"30": "#643C31",
"35": "#72483C",
"40": "#7F5347",
"50": "#9B6C5E",
"60": "#B88576",
"70": "#D59F8F",
"80": "#F2B9A9",
"90": "#FFDBD1",
"95": "#FFEDE8",
"98": "#FFF8F6",
"99": "#FFFBFF",
"100": "#FFFFFF"
},
"tertiary": {
"0": "#000000",
"5": "#161000",
"10": "#231B00",
"15": "#2F2500",
"20": "#3B2F00",
"25": "#483A00",
"30": "#564500",
"35": "#635109",
"40": "#705D16",
"50": "#8A752D",
"60": "#A58F44",
"70": "#C1AA5C",
"80": "#DEC574",
"90": "#FCE18D",
"95": "#FFF0C8",
"98": "#FFF8F0",
"99": "#FFFBFF",
"100": "#FFFFFF"
},
"neutral": {
"0": "#000000",
"5": "#15100E",
"10": "#201A18",
"15": "#2B2422",
"20": "#362F2D",
"25": "#413A38",
"30": "#4D4543",
"35": "#59514E",
"40": "#655C5A",
"50": "#7F7572",
"60": "#998E8C",
"70": "#B4A9A6",
"80": "#D0C4C1",
"90": "#EDE0DC",
"95": "#FBEEEB",
"98": "#FFF8F6",
"99": "#FFFBFF",
"100": "#FFFFFF"
},
"neutral-variant": {
"0": "#000000",
"5": "#190E0B",
"10": "#251915",
"15": "#30231F",
"20": "#3B2D29",
"25": "#473834",
"30": "#53433F",
"35": "#5F4F4A",
"40": "#6C5B56",
"50": "#85736E",
"60": "#A08C87",
"70": "#BCA7A1",
"80": "#D8C2BC",
"90": "#F5DED8",
"95": "#FFEDE8",
"98": "#FFF8F6",
"99": "#FFFBFF",
"100": "#FFFFFF"
}
}
}

418
ui/themes/material_slint_theme.json Normal file
View File

@@ -0,0 +1,418 @@
{
"description": "TYPE: CUSTOM\nMaterial Theme Builder export 2025-08-29 10:22:12",
"seed": "#2379F4",
"coreColors": {
"primary": "#2379F4"
},
"extendedColors": [],
"schemes": {
"light": {
"primary": "#445E91",
"surfaceTint": "#445E91",
"onPrimary": "#FFFFFF",
"primaryContainer": "#D8E2FF",
"onPrimaryContainer": "#2B4678",
"secondary": "#575E71",
"onSecondary": "#FFFFFF",
"secondaryContainer": "#DBE2F9",
"onSecondaryContainer": "#3F4759",
"tertiary": "#715573",
"onTertiary": "#FFFFFF",
"tertiaryContainer": "#FCD7FB",
"onTertiaryContainer": "#583E5B",
"error": "#BA1A1A",
"onError": "#FFFFFF",
"errorContainer": "#FFDAD6",
"onErrorContainer": "#93000A",
"background": "#F9F9FF",
"onBackground": "#1A1B20",
"surface": "#F9F9FF",
"onSurface": "#1A1B20",
"surfaceVariant": "#E1E2EC",
"onSurfaceVariant": "#44474F",
"outline": "#75777F",
"outlineVariant": "#C4C6D0",
"shadow": "#000000",
"scrim": "#000000",
"inverseSurface": "#2F3036",
"inverseOnSurface": "#F0F0F7",
"inversePrimary": "#ADC6FF",
"primaryFixed": "#D8E2FF",
"onPrimaryFixed": "#001A42",
"primaryFixedDim": "#ADC6FF",
"onPrimaryFixedVariant": "#2B4678",
"secondaryFixed": "#DBE2F9",
"onSecondaryFixed": "#141B2C",
"secondaryFixedDim": "#BFC6DC",
"onSecondaryFixedVariant": "#3F4759",
"tertiaryFixed": "#FCD7FB",
"onTertiaryFixed": "#29132D",
"tertiaryFixedDim": "#DEBCDF",
"onTertiaryFixedVariant": "#583E5B",
"surfaceDim": "#D9D9E0",
"surfaceBright": "#F9F9FF",
"surfaceContainerLowest": "#FFFFFF",
"surfaceContainerLow": "#F3F3FA",
"surfaceContainer": "#EEEDF4",
"surfaceContainerHigh": "#E8E7EF",
"surfaceContainerHighest": "#E2E2E9"
},
"light-medium-contrast": {
"primary": "#183566",
"surfaceTint": "#445E91",
"onPrimary": "#FFFFFF",
"primaryContainer": "#536DA1",
"onPrimaryContainer": "#FFFFFF",
"secondary": "#2E3647",
"onSecondary": "#FFFFFF",
"secondaryContainer": "#656D80",
"onSecondaryContainer": "#FFFFFF",
"tertiary": "#462D49",
"onTertiary": "#FFFFFF",
"tertiaryContainer": "#816383",
"onTertiaryContainer": "#FFFFFF",
"error": "#740006",
"onError": "#FFFFFF",
"errorContainer": "#CF2C27",
"onErrorContainer": "#FFFFFF",
"background": "#F9F9FF",
"onBackground": "#1A1B20",
"surface": "#F9F9FF",
"onSurface": "#0F1116",
"surfaceVariant": "#E1E2EC",
"onSurfaceVariant": "#33363E",
"outline": "#50525A",
"outlineVariant": "#6A6D75",
"shadow": "#000000",
"scrim": "#000000",
"inverseSurface": "#2F3036",
"inverseOnSurface": "#F0F0F7",
"inversePrimary": "#ADC6FF",
"primaryFixed": "#536DA1",
"onPrimaryFixed": "#FFFFFF",
"primaryFixedDim": "#3A5487",
"onPrimaryFixedVariant": "#FFFFFF",
"secondaryFixed": "#656D80",
"onSecondaryFixed": "#FFFFFF",
"secondaryFixedDim": "#4D5567",
"onSecondaryFixedVariant": "#FFFFFF",
"tertiaryFixed": "#816383",
"onTertiaryFixed": "#FFFFFF",
"tertiaryFixedDim": "#674C69",
"onTertiaryFixedVariant": "#FFFFFF",
"surfaceDim": "#C6C6CD",
"surfaceBright": "#F9F9FF",
"surfaceContainerLowest": "#FFFFFF",
"surfaceContainerLow": "#F3F3FA",
"surfaceContainer": "#E8E7EF",
"surfaceContainerHigh": "#DCDCE3",
"surfaceContainerHighest": "#D1D1D8"
},
"light-high-contrast": {
"primary": "#0A2B5B",
"surfaceTint": "#445E91",
"onPrimary": "#FFFFFF",
"primaryContainer": "#2E487A",
"onPrimaryContainer": "#FFFFFF",
"secondary": "#242C3D",
"onSecondary": "#FFFFFF",
"secondaryContainer": "#41495B",
"onSecondaryContainer": "#FFFFFF",
"tertiary": "#3B233F",
"onTertiary": "#FFFFFF",
"tertiaryContainer": "#5A405D",
"onTertiaryContainer": "#FFFFFF",
"error": "#600004",
"onError": "#FFFFFF",
"errorContainer": "#98000A",
"onErrorContainer": "#FFFFFF",
"background": "#F9F9FF",
"onBackground": "#1A1B20",
"surface": "#F9F9FF",
"onSurface": "#000000",
"surfaceVariant": "#E1E2EC",
"onSurfaceVariant": "#000000",
"outline": "#292C33",
"outlineVariant": "#464951",
"shadow": "#000000",
"scrim": "#000000",
"inverseSurface": "#2F3036",
"inverseOnSurface": "#FFFFFF",
"inversePrimary": "#ADC6FF",
"primaryFixed": "#2E487A",
"onPrimaryFixed": "#FFFFFF",
"primaryFixedDim": "#143162",
"onPrimaryFixedVariant": "#FFFFFF",
"secondaryFixed": "#41495B",
"onSecondaryFixed": "#FFFFFF",
"secondaryFixedDim": "#2B3344",
"onSecondaryFixedVariant": "#FFFFFF",
"tertiaryFixed": "#5A405D",
"onTertiaryFixed": "#FFFFFF",
"tertiaryFixedDim": "#422A46",
"onTertiaryFixedVariant": "#FFFFFF",
"surfaceDim": "#B8B8BF",
"surfaceBright": "#F9F9FF",
"surfaceContainerLowest": "#FFFFFF",
"surfaceContainerLow": "#F0F0F7",
"surfaceContainer": "#E2E2E9",
"surfaceContainerHigh": "#D4D4DB",
"surfaceContainerHighest": "#C6C6CD"
},
"dark": {
"primary": "#ADC6FF",
"surfaceTint": "#ADC6FF",
"onPrimary": "#112F60",
"primaryContainer": "#2B4678",
"onPrimaryContainer": "#D8E2FF",
"secondary": "#BFC6DC",
"onSecondary": "#293041",
"secondaryContainer": "#3F4759",
"onSecondaryContainer": "#DBE2F9",
"tertiary": "#DEBCDF",
"onTertiary": "#402843",
"tertiaryContainer": "#583E5B",
"onTertiaryContainer": "#FCD7FB",
"error": "#FFB4AB",
"onError": "#690005",
"errorContainer": "#93000A",
"onErrorContainer": "#FFDAD6",
"background": "#111318",
"onBackground": "#E2E2E9",
"surface": "#111318",
"onSurface": "#E2E2E9",
"surfaceVariant": "#44474F",
"onSurfaceVariant": "#C4C6D0",
"outline": "#8E9099",
"outlineVariant": "#44474F",
"shadow": "#000000",
"scrim": "#000000",
"inverseSurface": "#E2E2E9",
"inverseOnSurface": "#2F3036",
"inversePrimary": "#445E91",
"primaryFixed": "#D8E2FF",
"onPrimaryFixed": "#001A42",
"primaryFixedDim": "#ADC6FF",
"onPrimaryFixedVariant": "#2B4678",
"secondaryFixed": "#DBE2F9",
"onSecondaryFixed": "#141B2C",
"secondaryFixedDim": "#BFC6DC",
"onSecondaryFixedVariant": "#3F4759",
"tertiaryFixed": "#FCD7FB",
"onTertiaryFixed": "#29132D",
"tertiaryFixedDim": "#DEBCDF",
"onTertiaryFixedVariant": "#583E5B",
"surfaceDim": "#111318",
"surfaceBright": "#37393E",
"surfaceContainerLowest": "#0C0E13",
"surfaceContainerLow": "#1A1B20",
"surfaceContainer": "#1E1F25",
"surfaceContainerHigh": "#282A2F",
"surfaceContainerHighest": "#33353A"
},
"dark-medium-contrast": {
"primary": "#CFDCFF",
"surfaceTint": "#ADC6FF",
"onPrimary": "#012454",
"primaryContainer": "#7790C7",
"onPrimaryContainer": "#000000",
"secondary": "#D5DCF3",
"onSecondary": "#1E2636",
"secondaryContainer": "#8990A5",
"onSecondaryContainer": "#000000",
"tertiary": "#F5D1F5",
"onTertiary": "#341D38",
"tertiaryContainer": "#A687A7",
"onTertiaryContainer": "#000000",
"error": "#FFD2CC",
"onError": "#540003",
"errorContainer": "#FF5449",
"onErrorContainer": "#000000",
"background": "#111318",
"onBackground": "#E2E2E9",
"surface": "#111318",
"onSurface": "#FFFFFF",
"surfaceVariant": "#44474F",
"onSurfaceVariant": "#DADCE6",
"outline": "#B0B1BB",
"outlineVariant": "#8E9099",
"shadow": "#000000",
"scrim": "#000000",
"inverseSurface": "#E2E2E9",
"inverseOnSurface": "#282A2F",
"inversePrimary": "#2D4779",
"primaryFixed": "#D8E2FF",
"onPrimaryFixed": "#00102E",
"primaryFixedDim": "#ADC6FF",
"onPrimaryFixedVariant": "#183566",
"secondaryFixed": "#DBE2F9",
"onSecondaryFixed": "#091121",
"secondaryFixedDim": "#BFC6DC",
"onSecondaryFixedVariant": "#2E3647",
"tertiaryFixed": "#FCD7FB",
"onTertiaryFixed": "#1E0822",
"tertiaryFixedDim": "#DEBCDF",
"onTertiaryFixedVariant": "#462D49",
"surfaceDim": "#111318",
"surfaceBright": "#43444A",
"surfaceContainerLowest": "#06070C",
"surfaceContainerLow": "#1C1D22",
"surfaceContainer": "#26282D",
"surfaceContainerHigh": "#313238",
"surfaceContainerHighest": "#3C3D43"
},
"dark-high-contrast": {
"primary": "#ECEFFF",
"surfaceTint": "#ADC6FF",
"onPrimary": "#000000",
"primaryContainer": "#A9C2FC",
"onPrimaryContainer": "#000A22",
"secondary": "#ECEFFF",
"onSecondary": "#000000",
"secondaryContainer": "#BBC2D8",
"onSecondaryContainer": "#040B1B",
"tertiary": "#FFEAFC",
"onTertiary": "#000000",
"tertiaryContainer": "#DAB8DB",
"onTertiaryContainer": "#17031C",
"error": "#FFECE9",
"onError": "#000000",
"errorContainer": "#FFAEA4",
"onErrorContainer": "#220001",
"background": "#111318",
"onBackground": "#E2E2E9",
"surface": "#111318",
"onSurface": "#FFFFFF",
"surfaceVariant": "#44474F",
"onSurfaceVariant": "#FFFFFF",
"outline": "#EEEFF9",
"outlineVariant": "#C1C2CC",
"shadow": "#000000",
"scrim": "#000000",
"inverseSurface": "#E2E2E9",
"inverseOnSurface": "#000000",
"inversePrimary": "#2D4779",
"primaryFixed": "#D8E2FF",
"onPrimaryFixed": "#000000",
"primaryFixedDim": "#ADC6FF",
"onPrimaryFixedVariant": "#00102E",
"secondaryFixed": "#DBE2F9",
"onSecondaryFixed": "#000000",
"secondaryFixedDim": "#BFC6DC",
"onSecondaryFixedVariant": "#091121",
"tertiaryFixed": "#FCD7FB",
"onTertiaryFixed": "#000000",
"tertiaryFixedDim": "#DEBCDF",
"onTertiaryFixedVariant": "#1E0822",
"surfaceDim": "#111318",
"surfaceBright": "#4E5056",
"surfaceContainerLowest": "#000000",
"surfaceContainerLow": "#1E1F25",
"surfaceContainer": "#2F3036",
"surfaceContainerHigh": "#3A3B41",
"surfaceContainerHighest": "#45474C"
}
},
"palettes": {
"primary": {
"0": "#000000",
"5": "#00102D",
"10": "#001A42",
"15": "#002455",
"20": "#002E6A",
"25": "#00397F",
"30": "#004495",
"35": "#004FAB",
"40": "#005AC2",
"50": "#1572ED",
"60": "#4D8EFF",
"70": "#81AAFF",
"80": "#ADC6FF",
"90": "#D8E2FF",
"95": "#EDF0FF",
"98": "#F9F9FF",
"99": "#FEFBFF",
"100": "#FFFFFF"
},
"secondary": {
"0": "#000000",
"5": "#031029",
"10": "#0E1B34",
"15": "#19253F",
"20": "#24304A",
"25": "#2F3B56",
"30": "#3A4762",
"35": "#46526E",
"40": "#525E7B",
"50": "#6A7794",
"60": "#8491AF",
"70": "#9EABCB",
"80": "#BAC6E7",
"90": "#D8E2FF",
"95": "#EDF0FF",
"98": "#F9F9FF",
"99": "#FEFBFF",
"100": "#FFFFFF"
},
"tertiary": {
"0": "#000000",
"5": "#23012A",
"10": "#2F0C36",
"15": "#3A1741",
"20": "#46224C",
"25": "#522D58",
"30": "#5F3964",
"35": "#6B4471",
"40": "#78507D",
"50": "#936897",
"60": "#AE82B2",
"70": "#CB9CCE",
"80": "#E7B6EB",
"90": "#FED6FF",
"95": "#FFEBFC",
"98": "#FFF7FA",
"99": "#FFFBFF",
"100": "#FFFFFF"
},
"neutral": {
"0": "#000000",
"5": "#101114",
"10": "#1B1B1F",
"15": "#252629",
"20": "#303034",
"25": "#3B3B3F",
"30": "#46464A",
"35": "#525256",
"40": "#5E5E62",
"50": "#77777A",
"60": "#919094",
"70": "#ABABAF",
"80": "#C7C6CA",
"90": "#E3E2E6",
"95": "#F2F0F4",
"98": "#FAF8FD",
"99": "#FEFBFF",
"100": "#FFFFFF"
},
"neutral-variant": {
"0": "#000000",
"5": "#0E1118",
"10": "#191B22",
"15": "#23262D",
"20": "#2E3038",
"25": "#393B43",
"30": "#44474F",
"35": "#50525A",
"40": "#5C5E66",
"50": "#75777F",
"60": "#8E9099",
"70": "#A9ABB4",
"80": "#C4C6D0",
"90": "#E1E2EC",
"95": "#EFF0FA",
"98": "#F9F9FF",
"99": "#FEFBFF",
"100": "#FFFFFF"
}
}
}

256
ui/ui/components/app_bar.slint Normal file
View File

@@ -0,0 +1,256 @@
// Copyright © SixtyFPS GmbH <info@slint.dev>
// SPDX-License-Identifier: MIT
import { IconButton } from "./icon_button.slint";
import { MaterialText } from "./material_text.slint";
import { MaterialTypography, TextStyle } from "../styling/material_typography.slint";
import { MaterialPalette } from "../styling/material_palette.slint";
import { MaterialStyleMetrics } from "../styling/material_style_metrics.slint";
import { IconButtonItem } from "./bottom_app_bar.slint";
component BaseAppBar {
in property <string> title;
in property <IconButtonItem> leading_button;
in property <bool> show_background;
in property <[IconButtonItem]> trailing_buttons;
in property <TextHorizontalAlignment> horizontal_alignment;
in property <length> spacing;
in property <length> vertical_spacing;
in property <bool> two_rows;
in property <TextStyle> text_style;
in property <length> text_padding;
in property <length> appbar_padding_right: 0;
in property <length> appbar_padding_top: 0;
in property <length> appbar_padding_bottom: 0;
callback leading_button_clicked();
callback trailing_button_clicked(index: int);
min_width: layout.min_width;
min_height: layout.min_height;
Rectangle {
background: root.show_background ? MaterialPalette.surface_container : MaterialPalette.surface;
layout := VerticalLayout {
padding_top: root.appbar_padding_top;
padding_bottom: root.appbar_padding_bottom;
min_width: top_layout.min_width;
spacing: root.vertical_spacing;
top_layout := HorizontalLayout {
padding_left: root.spacing;
padding_right: root.appbar_padding_right;
spacing: MaterialStyleMetrics.spacing_6;
if root.leading_button.icon.width > 0 && root.leading_button.icon.height > 0 : VerticalLayout {
alignment: center;
IconButton {
icon: root.leading_button.icon;
enabled: root.leading_button.enabled;
tooltip: root.leading_button.tooltip;
clicked => {
root.leading_button_clicked();
}
}
}
if !root.two_rows : MaterialText {
horizontal_stretch: 1;
text: root.title;
vertical_alignment: center;
horizontal_alignment: root.horizontal_alignment;
color: MaterialPalette.on_surface;
overflow: elide;
style: root.text_style;
}
// spacer
if root.two_rows : Rectangle {
horizontal_stretch: 1;
}
if root.trailing_buttons.length > 0 : VerticalLayout {
alignment: center;
HorizontalLayout {
spacing: top_layout.spacing;
for item[index] in root.trailing_buttons : IconButton {
icon: item.icon;
enabled: item.enabled;
tooltip: item.tooltip;
clicked => {
root.trailing_button_clicked(index);
}
}
}
}
}
if root.two_rows && root.title != "" : HorizontalLayout {
padding_left: root.text_padding;
padding_right: self.padding_left;
MaterialText {
text: root.title;
horizontal_alignment: root.horizontal_alignment;
color: MaterialPalette.on_surface;
overflow: elide;
style: root.text_style;
}
}
}
}
}
export component AppBar {
in property <string> title;
in property <IconButtonItem> leading_button;
in property <IconButtonItem> trailing_button;
in property <bool> show_background;
callback leading_button_clicked();
callback trailing_button_clicked();
min_height: max(MaterialStyleMetrics.size_64, base.min_height);
HorizontalLayout {
base := BaseAppBar {
title: root.title;
horizontal_alignment: center;
leading_button: root.leading_button;
trailing_buttons: [root.trailing_button];
show_background: root.show_background;
appbar_padding_right: self.padding_left;
appbar_padding_top: MaterialStyleMetrics.padding_8;
appbar_padding_bottom: self.padding_top;
spacing: MaterialStyleMetrics.spacing_6;
text_style: MaterialTypography.title_large;
leading_button_clicked => {
root.leading_button_clicked();
}
trailing_button_clicked(index) => {
root.trailing_button_clicked();
}
}
}
}
export component SmallAppBar {
in property <string> title;
in property <IconButtonItem> leading_button;
in property <[IconButtonItem]> trailing_buttons;
in property <bool> show_background;
callback leading_button_clicked();
callback trailing_button_clicked(index: int);
min_height: max(MaterialStyleMetrics.size_64, base.min_height);
HorizontalLayout {
base := BaseAppBar {
title: root.title;
horizontal_alignment: left;
leading_button: root.leading_button;
trailing_buttons: root.trailing_buttons;
show_background: root.show_background;
appbar_padding_right: self.padding_left;
appbar_padding_top: MaterialStyleMetrics.padding_8;
appbar_padding_bottom: self.padding_top;
spacing: MaterialStyleMetrics.spacing_4;
text_style: MaterialTypography.title_large;
leading_button_clicked => {
root.leading_button_clicked();
}
trailing_button_clicked(index) => {
root.trailing_button_clicked(index);
}
}
}
}
export component MediumAppBar {
in property <string> title;
in property <IconButtonItem> leading_button;
in property <[IconButtonItem]> trailing_buttons;
in property <bool> show_background;
callback leading_button_clicked();
callback trailing_button_clicked(index: int);
min_height: max(MaterialStyleMetrics.size_64, base.min_height);
HorizontalLayout {
base := BaseAppBar {
title: root.title;
horizontal_alignment: left;
leading_button: root.leading_button;
trailing_buttons: root.trailing_buttons;
show_background: root.show_background;
appbar_padding_right: self.padding_left;
appbar_padding_top: MaterialStyleMetrics.padding_8;
appbar_padding_bottom: MaterialStyleMetrics.padding_24;
vertical_spacing: MaterialStyleMetrics.spacing_4;
spacing: MaterialStyleMetrics.spacing_4;
two_rows: true;
text_style: MaterialTypography.headline_small;
text_padding: MaterialStyleMetrics.padding_16;
leading_button_clicked => {
root.leading_button_clicked();
}
trailing_button_clicked(index) => {
root.trailing_button_clicked(index);
}
}
}
}
export component LargeAppBar {
in property <string> title;
in property <IconButtonItem> leading_button;
in property <[IconButtonItem]> trailing_buttons;
in property <bool> show_background;
callback leading_button_clicked();
callback trailing_button_clicked(index: int);
min_height: max(MaterialStyleMetrics.size_64, base.min_height);
HorizontalLayout {
base := BaseAppBar {
title: root.title;
horizontal_alignment: left;
leading_button: root.leading_button;
trailing_buttons: root.trailing_buttons;
show_background: root.show_background;
appbar_padding_right: self.padding_left;
appbar_padding_top: MaterialStyleMetrics.padding_8;
appbar_padding_bottom: MaterialStyleMetrics.padding_28;
vertical_spacing: MaterialStyleMetrics.spacing_40;
spacing: MaterialStyleMetrics.spacing_4;
two_rows: true;
text_style: MaterialTypography.headline_medium;
text_padding: MaterialStyleMetrics.padding_16;
leading_button_clicked => {
root.leading_button_clicked();
}
trailing_button_clicked(index) => {
root.trailing_button_clicked(index);
}
}
}
}

36
ui/ui/components/badge.slint Normal file
View File

@@ -0,0 +1,36 @@
// Copyright © SixtyFPS GmbH <info@slint.dev>
// SPDX-License-Identifier: MIT
import { MaterialStyleMetrics } from "../styling/material_style_metrics.slint";
import { MaterialPalette } from "../styling/material_palette.slint";
import { MaterialTypography } from "../styling/material_typography.slint";
import { MaterialText } from "material_text.slint";
export component Badge {
in property <string> text;
width: max(MaterialStyleMetrics.size_16, label.width + 2 * MaterialStyleMetrics.padding_4);
height: max(MaterialStyleMetrics.size_16, label.height);
background_layer := Rectangle {
width: parent.width;
height: parent.height;
border_radius: self.height / 2;
background: MaterialPalette.error;
}
label := MaterialText {
text: root.text;
color: MaterialPalette.on_error;
vertical_alignment: center;
horizontal_alignment: center;
style: MaterialTypography.label_small;
}
states [
small when root.text == "" : {
background_layer.width: MaterialStyleMetrics.size_6;
background_layer.height: MaterialStyleMetrics.size_6;
}
]
}

72
ui/ui/components/base_button.slint Normal file
View File

@@ -0,0 +1,72 @@
// Copyright © SixtyFPS GmbH <info@slint.dev>
// SPDX-License-Identifier: MIT
import { StateLayerArea } from "./state_layer.slint";
import { MaterialText } from "./material_text.slint";
import { Icon } from "./icon.slint";
import { MaterialTypography } from "../styling/material_typography.slint";
import { MaterialStyleMetrics } from "../styling/material_style_metrics.slint";
import { Avatar } from "./list.slint";
export component BaseButton inherits StateLayerArea {
in property <image> icon;
in property <color> icon_color: self.color;
in property <string> text;
in property <length> button_horizontal_padding: MaterialStyleMetrics.padding_24;
in property <length> button_vertical_padding: MaterialStyleMetrics.padding_10;
in property <length> button_padding_left: self.button_horizontal_padding;
in property <length> button_padding_right: self.button_horizontal_padding;
in property <length> button_padding_top: self.button_vertical_padding;
in property <length> button_padding_bottom: self.button_vertical_padding;
in property <length> spacing: MaterialStyleMetrics.spacing_8;
in property <length> min_layout_width: MaterialStyleMetrics.size_40;
in property <length> min_layout_height: MaterialStyleMetrics.size_40;
in property <length> icon_size: MaterialStyleMetrics.icon_size_18;
in property <image> avatar_icon;
in property <length> avatar_size;
in property <color> avatar_background: #00000000;
out property <bool> has_icon: root.icon.width > 0 && root.icon.height > 0;
out property <bool> has_avatar: root.avatar_icon.width > 0 && root.avatar_icon.height > 0;
min_width: max(root.min_layout_width, layout.min_width);
min_height: max(root.min_layout_height, layout.min_height);
tooltip_offset: root.height / 2 + root.icon_size / 2 + MaterialStyleMetrics.padding_14;
layout := HorizontalLayout {
padding_left: root.button_padding_left;
padding_right: root.button_padding_right;
padding_top: root.button_padding_top;
padding_bottom: root.button_padding_bottom;
spacing: root.spacing;
alignment: center;
if root.has_icon || root.has_avatar : VerticalLayout {
alignment: center;
if root.has_avatar && root.avatar_size > 0 : Avatar {
width: root.avatar_size;
height: self.width;
image: root.avatar_icon;
background: root.avatar_background;
}
if root.has_icon : Icon {
source: root.icon;
colorize: root.icon_color;
opacity: root.enabled ? 100% : 38%;
width: root.icon_size;
}
}
if root.text != "" : MaterialText {
text: root.text;
style: MaterialTypography.label_large;
color: root.color;
opacity: root.enabled ? 100% : 38%;
overflow: clip;
vertical_alignment: center;
}
@children
}
}

51
ui/ui/components/base_navigation.slint Normal file
View File

@@ -0,0 +1,51 @@
// Copyright © SixtyFPS GmbH <info@slint.dev>
// SPDX-License-Identifier: MIT
import { NavigationItem } from "../items/navigation_item.slint";
export component BaseNavigationItemTemplate {
in property <image> icon;
in property <image> selected_icon;
in property <string> text;
in property <int> index;
in property <bool> selected;
in property <bool> show_badge;
in property <string> badge;
callback clicked;
callback pointer_event(event: PointerEvent, position: Point);
accessible-role: tab;
accessible-label: root.text;
accessible-item-index: root.index;
accessible-item-selectable: true;
accessible-item-selected: root.selected;
accessible-action-default => { self.clicked(); }
@children
}
export component BaseNavigation {
in property <[NavigationItem]> items;
in_out property <int> current_index;
callback index_changed(index: int);
accessible-role: tab-list;
// accessible-delegate-focus: root.current-focused >= 0 ? root.current-focused : root.current-index;
// accessible-label: root.title;
accessible-item-count: root.items.length;
@children
protected function select(index: int) {
if index < 0 || index >= root.items.length {
return;
}
root.current_index = index;
root.index_changed(index);
}
}

64
ui/ui/components/bottom_app_bar.slint Normal file
View File

@@ -0,0 +1,64 @@
// Copyright © SixtyFPS GmbH <info@slint.dev>
// SPDX-License-Identifier: MIT
import { IconButton } from "./icon_button.slint";
import { FloatingActionButton, FABStyle } from "./floating_action_button.slint";
import { MaterialPalette } from "../styling/material_palette.slint";
import { MaterialStyleMetrics } from "../styling/material_style_metrics.slint";
export struct IconButtonItem {
icon: image,
tooltip: string,
enabled: bool
}
export component BottomAppBar {
in property <[IconButtonItem]> icon_buttons;
in property <image> fab_icon;
callback fab_clicked();
callback icon_button_clicked(index: int);
min_height: max(MaterialStyleMetrics.size_80, layout.min_height);
Rectangle {
background: MaterialPalette.surface_container;
layout := HorizontalLayout {
padding_left: MaterialStyleMetrics.padding_4;
padding_right: MaterialStyleMetrics.padding_16;
VerticalLayout {
alignment: center;
HorizontalLayout {
for button[index] in root.icon_buttons : IconButton {
icon: button.icon;
enabled: button.enabled;
tooltip: button.tooltip;
clicked => {
root.icon_button_clicked(index);
}
}
}
}
// spacer
Rectangle {}
if root.fab_icon.width > 0 && root.fab_icon.height > 0 : VerticalLayout {
alignment: center;
FloatingActionButton {
icon: root.fab_icon;
style: FABStyle.standard;
clicked => {
root.fab_clicked();
}
}
}
}
}
}

125
ui/ui/components/bottom_sheet.slint Normal file
View File

@@ -0,0 +1,125 @@
// Copyright © SixtyFPS GmbH <info@slint.dev>
// SPDX-License-Identifier: MIT
import { Elevation } from "./elevation.slint";
import { MaterialPalette } from "../styling/material_palette.slint";
import { MaterialStyleMetrics } from "../styling/material_style_metrics.slint";
import { Horizontal } from "./horizontal.slint";
import { MaterialAnimations } from "../styling/material_animations.slint";
import { Modal } from "./modal.slint";
component BottomSheet {
callback drag_moved(offset_y: length);
callback pressed();
callback released();
elevation := Elevation {
width: 100%;
height: 100%;
level: 3;
border_radius: MaterialStyleMetrics.border_radius_16;
}
TouchArea {
Rectangle {
background: MaterialPalette.surface_container_low;
border_top_left_radius: MaterialStyleMetrics.border_radius_16;
border_top_right_radius: self.border_top_left_radius;
VerticalLayout {
alignment: start;
drag_handle := TouchArea {
height: MaterialStyleMetrics.size_36;
Rectangle {
width: MaterialStyleMetrics.size_32;
height: MaterialStyleMetrics.size_4;
background: MaterialPalette.outline;
border_radius: self.height / 2;
}
moved => {
root.drag_moved(self.pressed_y - self.mouse_y);
}
changed pressed => {
if self.pressed {
root.pressed();
return;
}
root.released();
}
}
Horizontal {
@children
}
}
}
}
}
export component ModalBottomSheet inherits PopupWindow {
close_policy: no_auto_close;
property <length> drag_margin: MaterialStyleMetrics.padding_56;
modal := Modal {
width: 100%;
height: 100%;
sheet := BottomSheet {
property <duration> y_duration: MaterialAnimations.standard_accelerate_duration;
property <length> y_drag_start;
property <length> height_drag_start;
x: (parent.width - self.width) / 2;
y: parent.height;
width: min(MaterialStyleMetrics.size_640, parent.width - 2 * MaterialStyleMetrics.padding_56);
@children
drag_moved(offset_y) => {
self.y_duration = 0;
self.y = max(self.y - offset_y, self.y_drag_start);
self.height += offset_y;
}
pressed => {
self.y_drag_start = self.y;
self.height_drag_start = self.height;
}
released => {
if self.y >= root.height - root.drag_margin {
root.close();
return;
}
self.y_duration = MaterialAnimations.standard_accelerate_duration;
self.height = self.height_drag_start;
self.y = self.y_drag_start;
}
animate y, height {
duration: self.y_duration;
easing: MaterialAnimations.standard_easing;
}
}
clicked => {
root.close();
}
}
Timer {
interval: 50ms;
triggered => {
sheet.y = modal.height - sheet.height;
self.running = false;
}
}
}

112
ui/ui/components/card.slint Normal file
View File

@@ -0,0 +1,112 @@
// Copyright © SixtyFPS GmbH <info@slint.dev>
// SPDX-License-Identifier: MIT
import { MaterialPalette } from "../styling/material_palette.slint";
import { MaterialStyleMetrics } from "../styling/material_style_metrics.slint";
import { Elevation } from "./elevation.slint";
import { StateLayerArea } from "./state_layer.slint";
component BaseCard {
in property <bool> clickable;
in property <bool> has_elevation;
in property <color> background;
in property <color> border_color;
in property <length> border_width;
callback clicked();
forward_focus: state_layer;
if root.has_elevation : Elevation {
width: 100%;
height: 100%;
border_radius: background_layer.border_radius;
level: 1;
}
background_layer := Rectangle {
background: root.background;
border_radius: MaterialStyleMetrics.border_radius_12;
border_width: root.border_width;
border_color: root.border_color;
}
state_layer := StateLayerArea {
width: 100%;
height: 100%;
border_radius: background_layer.border_radius;
visible: root.clickable;
enabled: root.visible;
clicked => {
root.clicked();
}
}
Rectangle {
clip: true;
border_radius: MaterialStyleMetrics.border_radius_12;
@children
}
}
export component ElevatedCard {
in property <bool> clickable <=> base.clickable;
callback clicked <=> base.clicked;
forward_focus: base;
accessible-role: button;
accessible-enabled: root.clickable;
accessible-action-default => { base.clicked(); }
base := BaseCard {
width: 100%;
height: 100%;
has_elevation: true;
background: MaterialPalette.surface;
@children
}
}
export component FilledCard {
in property <bool> clickable <=> base.clickable;
callback clicked <=> base.clicked;
forward_focus: base;
accessible-role: button;
accessible-enabled: root.clickable;
accessible-action-default => { base.clicked(); }
base := BaseCard {
width: 100%;
height: 100%;
background: MaterialPalette.surface_container_highest;
@children
}
}
export component OutlinedCard {
in property <bool> clickable <=> base.clickable;
callback clicked <=> base.clicked;
forward_focus: base;
accessible-role: button;
accessible-enabled: root.clickable;
accessible-action-default => { base.clicked(); }
base := BaseCard {
width: 100%;
height: 100%;
background: MaterialPalette.surface_container_low;
border_width: 1px;
border_color: MaterialPalette.outline;
@children
}
}

143
ui/ui/components/check_box.slint Normal file
View File

@@ -0,0 +1,143 @@
// Copyright © SixtyFPS GmbH <info@slint.dev>
// SPDX-License-Identifier: MIT
import { MaterialStyleMetrics } from "../styling/material_style_metrics.slint";
import { MaterialPalette } from "../styling/material_palette.slint";
import { MaterialAnimations } from "../styling/material_animations.slint";
import { Icons } from "../icons/icons.slint";
import { ListTile } from "./list.slint";
import { StateLayerArea } from "./state_layer.slint";
import { Icon } from "./icon.slint";
export enum CheckState {
unchecked,
partially_checked,
checked,
}
export component CheckBox {
in_out property <CheckState> check_state;
in_out property <bool> tristate;
in property <bool> has_error;
in property <bool> enabled <=> state_area.enabled;
property <bool> checked: root.check_state == CheckState.checked || root.check_state == CheckState.partially_checked;
callback checked_state_changed(check_state: CheckState);
min_width: MaterialStyleMetrics.size_48;
min_height: self.min_width;
accessible-enabled: root.enabled;
accessible-checkable: true;
accessible-checked <=> root.checked;
accessible-role: checkbox;
accessible-action-default => { state_area.clicked(); }
forward_focus: state_area;
init() => {
// Initialize tristate as well
if self.check_state == CheckState.partially-checked {
root.tristate = true;
}
}
state_area := StateLayerArea {
width: 100%;
height: 100%;
border_radius: max(self.width, self.height) / 2;
color: MaterialPalette.on_surface;
background_layer := Rectangle {
width: MaterialStyleMetrics.size_18;
height: self.width;
border_radius: MaterialStyleMetrics.border_radius_2;
border_width: root.checked ? 0 : 2px;
border_color: root.has_error ? MaterialPalette.error : MaterialPalette.on_surface_variant;
if root.checked : Icon {
colorize: MaterialPalette.on_primary;
source: Icons.check;
states [
partial_checked when root.check_state == CheckState.partially-checked : {
source: Icons.remove;
}
]
}
animate background, border_width {
duration: MaterialAnimations.opacity_duration;
easing: MaterialAnimations.opacity_easing;
}
}
clicked => {
root.toggle();
}
}
changed check_state => {
if self.check_state == CheckState.partially-checked {
root.tristate = true;
}
root.checked_state_changed(root.check_state);
}
public function toggle() {
if !root.tristate {
root.check_state = root.check_state != CheckState.checked ? CheckState.checked : CheckState.unchecked;
return;
}
root.check_state = root.check_state == CheckState.checked ? CheckState.partially_checked :
root.check_state == CheckState.partially_checked ? CheckState.unchecked : CheckState.checked;
}
// Keep for backward compatibility
public function set_check_state(check_state: CheckState) {
root.check_state = check_state;
}
states [
disabled when !root.enabled : {
state_area.display_background: false;
background_layer.border_color: root.checked ? transparent : MaterialPalette.on_surface.with_alpha(38%);
background_layer.background: root.checked ? MaterialPalette.on_surface.with_alpha(38%) : transparent;
}
checked when root.checked : {
background_layer.border_width: 0;
background_layer.background: root.has_error ? MaterialPalette.error : MaterialPalette.primary;
state_area.color: background_layer.background;
}
]
}
export component CheckBoxTile inherits ListTile {
in_out property <CheckState> check_state <=> check_box.check_state;
in_out property <bool> tristate <=> check_box.tristate;
in property <bool> has_error <=> check_box.has_error;
callback checked_state_changed <=> check_box.checked_state_changed;
Rectangle {
horizontal-stretch: 0;
check_box := CheckBox {
enabled: root.enabled;
}
}
// When clicked on this, but not on the checkbox
// apply the click on the checkbox manually
// So the user can click anywhere in the tile to toggle
// the checkbox
clicked => {
check_box.toggle();
}
// Keep function for backward compatibility
public function set_check_state(check-state: CheckState) {
check_box.set_check_state(check_state);
}
}

205
ui/ui/components/chip.slint Normal file
View File

@@ -0,0 +1,205 @@
// Copyright © SixtyFPS GmbH <info@slint.dev>
// SPDX-License-Identifier: MIT
import { BaseButton } from "./base_button.slint";
import { MaterialTypography } from "../styling/material_typography.slint";
import { MaterialPalette } from "../styling/material_palette.slint";
import { MaterialStyleMetrics } from "../styling/material_style_metrics.slint";
import { Icons } from "../icons/icons.slint";
import { MaterialAnimations } from "../styling/material_animations.slint";
import { IconButton } from "icon_button.slint";
export component ActionChip {
in property <image> icon <=> base.icon;
in property <string> text <=> base.text;
in property <bool> enabled <=> base.enabled;
in property <string> tooltip <=> base.tooltip;
in property <image> avatar_icon <=> base.avatar-icon;
in property <color> avatar_background <=> base.avatar_background;
callback clicked <=> base.clicked;
forward-focus: base;
accessible-role: button;
accessible-enabled: root.enabled;
accessible-label: root.text == "" ? root.tooltip : root.text;
accessible-action-default => { base.clicked(); }
border := Rectangle {
border_radius: base.border_radius;
border_width: 1px;
border_color: MaterialPalette.outline;
base := BaseButton {
min_layout_height: MaterialStyleMetrics.size_32;
border_radius: MaterialStyleMetrics.border_radius_8;
color: MaterialPalette.on_surface;
icon_color: MaterialPalette.primary;
spacing: MaterialStyleMetrics.spacing_8;
button_padding_left: self.has_icon ? MaterialStyleMetrics.padding_8 : MaterialStyleMetrics.padding_16;
button_padding_right:MaterialStyleMetrics.padding_16;
button_vertical_padding: MaterialStyleMetrics.padding_6;
avatar_size: MaterialStyleMetrics.size_18;
}
}
states [
disabled when !root.enabled : {
base.display_background: false;
base.icon_color: MaterialPalette.on_surface;
}
]
}
export component FilterChip {
in property <image> icon <=> base.icon;
in property <string> text <=> base.text;
in property <bool> enabled <=> base.enabled;
in property <string> tooltip <=> base.tooltip;
in_out property <bool> checked;
forward-focus: base;
accessible-role: button;
accessible-enabled: root.enabled;
accessible-label: root.text == "" ? root.tooltip : root.text;
accessible-checkable: true;
accessible-checked: root.checked;
accessible-action-default => { base.clicked(); }
border := Rectangle {
border_radius: base.border_radius;
border_width: 1px;
border_color: MaterialPalette.outline;
base := BaseButton {
min_layout_height: MaterialStyleMetrics.size_32;
border_radius: MaterialStyleMetrics.border_radius_8;
color: MaterialPalette.on_surface;
icon_color: MaterialPalette.primary;
spacing: MaterialStyleMetrics.spacing_8;
button_padding_left: self.has_icon ? MaterialStyleMetrics.padding_8 : MaterialStyleMetrics.padding_16;
button_padding_right:MaterialStyleMetrics.padding_16;
button_vertical_padding: MaterialStyleMetrics.padding_6;
avatar_size: MaterialStyleMetrics.size_18;
clicked => {
root.toggle();
}
}
states [
checked when root.checked : {
base.icon: Icons.check;
base.icon_color: MaterialPalette.on_secondary_container;
base.color: MaterialPalette.on_secondary_container;
border.border_width: 0;
border.background: MaterialPalette.secondary_container;
}
]
animate width { duration: MaterialAnimations.standard_accelerate_duration; easing: MaterialAnimations.standard_easing; }
}
function toggle() {
root.checked = !root.checked;
}
states [
disabled when !root.enabled : {
base.display_background: false;
base.icon_color: MaterialPalette.on_surface;
}
]
}
export component InputChip {
in property <image> leading_icon <=> base.icon;
in property <image> trailing_icon;
in property <image> avatar <=> base.avatar-icon;
in property <color> avatar_background <=> base.avatar_background;
in property <string> text <=> base.text;
in property <bool> enabled <=> base.enabled;
in property <string> tooltip <=> base.tooltip;
in property <bool> checkable;
in_out property <bool> checked;
property <bool> has_avatar: root.avatar.width > 0 && root.avatar.height > 0;
callback clicked();
callback trailing_icon_clicked();
forward-focus: base;
accessible-role: button;
accessible-enabled: root.enabled;
accessible-label: root.text == "" ? root.tooltip : root.text;
accessible-checkable: root.checkable;
accessible-checked: root.checked;
accessible-action-default => { base.clicked(); }
border := Rectangle {
border_radius: base.border_radius;
border_width: 1px;
border_color: MaterialPalette.outline;
clip: true;
base := BaseButton {
min_layout_height: MaterialStyleMetrics.size_32;
border_radius: root.has_avatar ? self.height / 2 : MaterialStyleMetrics.border_radius_8;
color: MaterialPalette.on_surface;
icon_color: MaterialPalette.primary;
spacing: MaterialStyleMetrics.spacing_8;
button_padding_left: root.has_avatar ? MaterialStyleMetrics.padding_4 : self.has_icon ? MaterialStyleMetrics.padding_8 : MaterialStyleMetrics.padding_12;
button_padding_right: root.trailing_icon.width > 0 && root.trailing_icon.height > 0 ? MaterialStyleMetrics.padding_8 : MaterialStyleMetrics.padding_12;
button_vertical_padding: MaterialStyleMetrics.padding_6;
avatar_size: MaterialStyleMetrics.size_18;
if root.trailing_icon.width > 0 && root.trailing_icon.height > 0 : VerticalLayout {
alignment: center;
IconButton {
icon: root.trailing_icon;
inline: true;
enabled: root.enabled;
clicked => {
root.trailing_icon_clicked();
}
}
}
clicked => {
root.clicked();
root.toggle();
}
}
states [
checked when root.checked : {
base.icon_color: MaterialPalette.on_secondary_container;
base.color: MaterialPalette.on_secondary_container;
border.border_width: 0;
border.background: MaterialPalette.secondary_container;
}
]
animate width { duration: MaterialAnimations.standard_accelerate_duration; easing: MaterialAnimations.standard_easing; }
}
function toggle() {
if !root.checkable {
return;
}
root.checked = !root.checked;
}
states [
disabled when !root.enabled : {
base.display_background: false;
base.icon_color: MaterialPalette.on_surface;
}
]
}

566
ui/ui/components/date_picker.slint Normal file
View File

@@ -0,0 +1,566 @@
// Copyright © SixtyFPS GmbH <info@slint.dev>
// SPDX-License-Identifier: MIT
import { BaseDialog } from "./dialog.slint";
import { MaterialStyleMetrics } from "../styling/material_style_metrics.slint";
import { Icons } from "../icons/icons.slint";
import { MaterialText } from "./material_text.slint";
import { StateLayer } from "./state_layer.slint";
import { ScrollView } from "./scroll_view.slint";
import { IconButton } from "./icon_button.slint";
import { TextField } from "./text_field.slint";
import { MaterialTypography } from "../styling/material_typography.slint";
import { MaterialPalette } from "../styling/material_palette.slint";
import { ExtendedTouchArea } from "./extended_touch_area.slint";
// defines the interface to get the data for the DatePicker from native code.
export global DatePickerAdapter {
// returns the number of days for the given month in the given year.
pure callback month_day_count(month: int, year: int) -> int;
// return the numbers of day to the first monday of the month.
pure callback month_offset(month: int, year: int) -> int;
// used to format a date that is defined by day month and year.
pure callback format_date(format: string, day: int, month: int, year: int) -> string;
// parses the given date string and returns a list of day, month and year.
pure callback parse_date(date: string, format: string) -> [int];
// returns true if the given date is valid.
pure callback valid_date(date: string, format: string) -> bool;
// returns the current date as list of day, month and year.
pure callback date_now() -> [int];
}
export struct Date {
year: int,
month: int,
day: int,
}
component CalendarHeaderDelegate {
in property <string> text <=> text_label.text;
min_width: max(MaterialStyleMetrics.size_40, content_layer.min_width);
min_height: max(MaterialStyleMetrics.size_40, content_layer.min_height);
content_layer := VerticalLayout {
text_label := MaterialText {
vertical_alignment: center;
horizontal_alignment: center;
style: MaterialTypography.body_large;
color: MaterialPalette.on_surface;
}
}
}
component CalendarDelegate {
in property <bool> selected;
in property <bool> today;
in property <string> text <=> text_label.text;
in property <bool> enabled: true;
callback clicked <=> touch_area.clicked;
min_width: max(MaterialStyleMetrics.size_40, content_layer.min_width);
min_height: max(MaterialStyleMetrics.size_40, content_layer.min_height);
forward_focus: focus_scope;
accessible_role: button;
accessible_checkable: true;
accessible_checked: root.selected;
accessible_label: root.text;
accessible_action_default => { touch_area.clicked(); }
touch_area := TouchArea {
enabled: root.enabled;
}
focus_scope := FocusScope {
width: 0px;
enabled: root.enabled;
key_pressed(event) => {
if (event.text == " " || event.text == "\n") {
touch_area.clicked();
return accept;
}
return reject;
}
}
background_layer := Rectangle {
border_radius: self.height / 2;
}
content_layer := HorizontalLayout {
text_label := MaterialText {
vertical_alignment: center;
horizontal_alignment: center;
style: MaterialTypography.body_large;
color: MaterialPalette.on_surface;
}
}
state_layer := StateLayer {
enabled: root.enabled;
border_radius: background_layer.border_radius;
pressed: touch_area.pressed;
has_hover: touch_area.has_hover;
has_focus: focus_scope.has_focus;
}
states [
// FIXME: states
disabled when !root.enabled : {
root.opacity: 0.38;
}
selected when root.selected : {
background_layer.background: MaterialPalette.primary;
text_label.color: MaterialPalette.on_primary;
}
today when root.today : {
background_layer.border_width: 1px;
background_layer.border_color: MaterialPalette.primary;
}
]
}
export component Calendar {
in property <int> column_count;
in property <int> row_count;
in property <length> delegate_size;
in property <int> start_column;
in property <[string]> header_model;
in property <int> month_count;
in property <Date> today;
in property <Date> selected_date;
in property <int> display_month;
in property <int> display_year;
callback select_date(date: Date);
// header
for day[index] in root.header_model : CalendarHeaderDelegate {
x: root.delegate_x(index);
y: root.delegate_y(index);
text: day;
}
// items
for index in root.month_count : CalendarDelegate {
property <Date> d: { day: index + 1, month: root.display_month, year: root.display_year };
x: root.delegate_x(root.index_on_calendar(index));
y: root.delegate_y(root.index_on_calendar(index));
width: root.delegate_size;
height: root.delegate_size;
text: index + 1;
selected: root.selected_date == self.d;
today: root.today == self.d;
clicked => {
root.select_date(self.d);
}
}
function index_on_calendar(index: int) -> int {
// add column count because items starts after header row
root.column_count + root.start_column + index
}
function row_for_index(index: int) -> int {
floor(index / root.column_count)
}
function column_for_index(index: int) -> int {
mod(index, root.column_count)
}
function delegate_x(index: int) -> length {
root.column_for_index(index) * root.delegate_size + root.column_for_index(index) * 1px /* * root.style.spacing */
}
function delegate_y(index: int) -> length {
root.row_for_index(index) * root.delegate_size + root.row_for_index(index) * 1px /* * root.style.spacing */
}
}
component YearSelection {
in property <[int]> model;
in property <length> spacing;
in property <int> visible_row_count;
in property <int> column_count;
in property <length> delegate_width;
in property <length> delegate_height;
in property <int> selected_year;
in property <int> today_year;
callback select_year(year: int);
property <length> row_height: root.height / root.visible_row_count;
property <int> row_count: root.model.length / root.column_count;
property <length> viewport_height: root.row_count * root.row_height;
property <length> start_x: root.width / (root.column_count + 1);
property <length> start_y: root.height / (root.visible_row_count + 1);
ScrollView {
width: 100%;
height: 100%;
viewport_width: root.width;
viewport_height: root.viewport_height;
for year[index] in root.model: CalendarDelegate {
x: root.delegate_center_x(index) - self.width / 2;
y: root.delegate_center_y(index) - self.height / 2;
width: root.delegate_width;
height: root.delegate_height;
text: year;
selected: year == root.selected_year;
today: year == root.today_year;
clicked => {
root.select_year(year);
}
}
}
function delegate_center_x(index: int) -> length {
root.start_x * (root.column_for_index(index) + 1)
}
function delegate_center_y(index: int) -> length {
root.start_y * (root.row_for_index(index) + 1)
}
function row_for_index(index: int) -> int {
floor(index / root.column_count)
}
function column_for_index(index: int) -> int {
mod(index, root.column_count)
}
}
export component SelectionButton {
in property <string> text <=> text-label.text;
in property <image> icon <=> icon-image.source;
in property <bool> enabled: true;
in-out property <bool> checked;
callback clicked();
min-width: content-layer.min-width;
min-height: max(40px, content-layer.min-height);
accessible-label: root.text;
accessible-role: button;
accessible-checkable: true;
accessible-checked: root.checked;
accessible-action-default => { touch-area.clicked(); }
forward-focus: touch-area;
touch-area := ExtendedTouchArea {
width: 100%;
height: 100%;
enabled: root.enabled;
clicked => {
root.checked = !root.checked;
root.clicked();
}
}
state-layer := StateLayer {
enabled: root.enabled;
pressed: touch-area.pressed;
has-hover: touch-area.has-hover;
has-focus: touch-area.has-focus;
background: text_label.color;
}
content-layer := HorizontalLayout {
alignment: center;
padding-left: 8px;
padding-right: 8px;
spacing: 8px;
text-label := MaterialText {
vertical-alignment: center;
color: MaterialPalette.on_surface_variant;
style: MaterialTypography.label_large;
}
icon-image := Image {
y: (parent.height - self.height) / 2;
width: MaterialStyleMetrics.size_18;
colorize: MaterialPalette.on_surface_variant;
transform-rotation: root.checked ? 180deg : 0;
animate transform-rotation { duration: 250ms; }
}
}
states [
disabled when !root.enabled : {
root.opacity: 0.38;
}
]
}
export component DatePickerPopup inherits PopupWindow {
in property <string> title;
in property <Date> date : { day: today[0], month: today[1], year: today[2] };
callback canceled();
callback accepted(date: Date);
// this is used for the navigation between months
property <string> input_title: @tr("Enter date");
property <string> input_placeholder_text: "mm/dd/yyyy";
property <string> input_format: "%m/%d/%Y";
property <string> cancel_text: @tr("Cancel");
property <string> ok_text: @tr("Ok");
property <Date> display_date: root.date;
property <Date> current_date: root.date;
property <length> delegate_size: 40px;
property <length> year_delegate_width: 72px;
property <int> calendar_column_count: 7;
property <int> calendar_row_count: 6;
property <length> calendar_min_width: root.delegate_size * root.calendar_column_count + (root.calendar_column_count - 1) * 1px;
property <length> calendar_min_height: root.delegate_size *(root.calendar_row_count + 1) + (root.calendar_row_count - 1) * 1px;
property <int> year_selection_column_count: 3;
property <int> year_selection_row_count: 5;
property <bool> year_selection;
property <bool> selection_mode: true;
property <string> current_input;
property <int> calendar_month_count: DatePickerAdapter.month_day_count(root.display_date.month, root.display_date.year);
property <[string]> calendar_header_model: [
@tr("One-letter abbrev for Sunday" => "S"),
@tr("One-letter abbrev for Monday" => "M"),
@tr("One-letter abbrev for Tuesday" => "T"),
@tr("One-letter abbrev for Wednesday" => "W"),
@tr("One-letter abbrev for Thursday" => "T"),
@tr("One-letter abbrev for Friday" => "F"),
@tr("One-letter abbrev for Saturday" => "S"),
];
property <[int]> today: DatePickerAdapter.date_now();
property <int> start_column: DatePickerAdapter.month_offset(root.display_date.month, root.display_date.year);
property <string> current_month: DatePickerAdapter.format_date("%B %Y", root.display_date.day, root.display_date.month, root.display_date.year);
property <[int]> year_model: [2024, 2025, 2026, 2027, 2028, 2029, 2031, 2032, 2033, 2034, 2035, 2036, 2037, 2038, 2039, 2040, 2041, 2042, 2043];
property <int> selected_year: root.display_date.year;
property <int> today_year: root.today[2];
property <string> current_day: DatePickerAdapter.format_date("%a, %b %d", root.current_date.day, root.current_date.month, root.current_date.year);
property <[int]> input_formatted: DatePickerAdapter.parse_date(root.current_input, root.input_format);
close_policy: no_auto_close;
forward_focus: base;
base := BaseDialog {
width: 100%;
height: 100%;
title: root.title;
actions: [
root.cancel_text,
root.ok_text
];
content_layer := VerticalLayout {
spacing: MaterialStyleMetrics.spacing_12;
header := HorizontalLayout {
MaterialText {
text: root.selection_mode ? root.current_day : root.input_title;
horizontal_alignment: left;
vertical_alignment: center;
style: MaterialTypography.headline_large;
}
if root.selection_mode : IconButton {
icon: Icons.edit;
accessible_label: "Toggle selection mode";
clicked => {
root.toggle_selection_mode();
}
}
}
Rectangle {
height: 1px;
background: MaterialPalette.outline;
}
if root.selection_mode : HorizontalLayout {
// FIXME: spacing
VerticalLayout {
horizontal_stretch: 0;
alignment: center;
SelectionButton {
text: root.current_month;
icon: Icons.arrow_drop_down;
checked <=> root.year_selection;
}
}
Rectangle {}
IconButton {
icon: Icons.chevron_backward;
accessible_label: "Previous month";
clicked => {
root.show_previous();
}
}
IconButton {
icon: Icons.chevron_forward;
accessible_label: "Next month";
clicked => {
root.show_next();
}
}
}
if root.selection_mode : VerticalLayout {
if !root.year_selection : Calendar {
min_width: root.calendar_min_width;
min_height: root.calendar_min_height;
column_count: root.calendar_column_count;
row_count: root.calendar_row_count;
delegate_size: root.delegate_size;
header_model: root.calendar_header_model;
month_count: root.calendar_month_count;
today: { day: root.today[0], month: root.today[1], year: root.today[2] };
selected_date <=> root.current_date;
start_column: root.start_column;
display_month: root.display_date.month;
display_year: root.display_date.year;
select_date(date) => {
root.select_date(date);
}
}
if root.year_selection : YearSelection {
min_width: root.calendar_min_width;
min_height: root.calendar_min_height;
column_count: root.year_selection_column_count;
visible_row_count: root.year_selection_row_count;
delegate_width: root.year_delegate_width;
delegate_height: root.delegate_size;
model: root.year_model;
selected_year: root.selected_year;
today_year: root.today_year;
select_year(year) => {
root.select_year(year);
}
}
}
Rectangle {
height: 1px;
visible: root.year_selection;
background: MaterialPalette.outline;
}
if !root.selection_mode : TextField {
text <=> root.current_input;
placeholder_text: root.input_placeholder_text;
trailing_icon: Icons.calendar_today;
trailing_icon_clicked => {
root.toggle_selection_mode();
}
}
}
action_clicked(index) => {
// cancel
if index == 0 {
root.close();
root.canceled();
} else if index == 1 {
root.accepted(root.date);
}
}
close => {
root.close();
}
}
changed date => {
root.display_date = root.date;
root.current_date = root.date;
}
changed selection_mode => {
// check switch from input mode if input is valid
if root.selection_mode && root.current_input_valid() {
root.current_date = root.input_as_date();
root.display_date = root.current_date;
}
}
pure public function ok_enabled() -> bool {
root.selection_mode || root.current_input_valid()
}
public function get_current_date() -> Date {
if root.selection_mode {
return root.current_date;
}
root.input_as_date()
}
pure function current_input_valid() -> bool {
DatePickerAdapter.valid_date(root.current_input, root.input_format)
}
pure function input_as_date() -> Date {
{ day: root.input_formatted[0], month: root.input_formatted[1], year: root.input_formatted[2] }
}
function select_date(date: Date) {
root.current_date = date;
}
function select_year(year: int) {
root.current_date = { day: 1, month: 1, year: year };
root.display_date = root.current_date;
root.year_selection = false;
}
function show_next() {
if root.display_date.month >= 12 {
root.display_date = { day: 1, month: 1, year: root.display_date.year + 1 };
return;
}
root.display_date = { day: 1, month: root.display_date.month + 1, year: root.display_date.year };
}
function show_previous() {
if root.display_date.month <= 1 {
root.display_date = { day: 1, month: 12, year: root.display_date.year - 1 };
return;
}
root.display_date = { day: 1, month: root.display_date.month - 1, year: root.display_date.year };
}
function toggle_selection_mode() {
root.selection_mode = !root.selection_mode;
}
}

233
ui/ui/components/dialog.slint Normal file
View File

@@ -0,0 +1,233 @@
// Copyright © SixtyFPS GmbH <info@slint.dev>
// SPDX-License-Identifier: MIT
import { MaterialPalette } from "../styling/material_palette.slint";
import { MaterialStyleMetrics } from "../styling/material_style_metrics.slint";
import { MaterialTypography } from "../styling/material_typography.slint";
import { TextButton } from "./text_button.slint";
import { FilledButton } from "./filled_button.slint";
import { MaterialText } from "./material_text.slint";
import { MaterialAnimations } from "../styling/material_animations.slint";
import { Modal } from "./modal.slint";
import { Icon } from "./icon.slint";
import { IconButton } from "./icon_button.slint";
import { Icons } from "../icons/icons.slint";
export component FullscreenDialog inherits PopupWindow {
in property <string> title;
in property <[string]> actions;
callback action_clicked(index: int);
close_policy: no_auto_close;
forward_focus: focus_scope;
focus_scope := FocusScope {
x: 0;
width: 0;
key_pressed(event) => {
if event.text == Key.Escape {
root.close();
return accept;
}
reject
}
}
background_layer := Rectangle {
width: 100%;
height: 100%;
opacity: 0;
background: MaterialPalette.surface;
VerticalLayout {
spacing: MaterialStyleMetrics.spacing_16;
HorizontalLayout {
padding: MaterialStyleMetrics.padding_24;
spacing: MaterialStyleMetrics.spacing_16;
vertical_stretch: 0;
IconButton {
icon: Icons.close;
clicked => {
root.close();
}
}
MaterialText {
text: root.title;
style: MaterialTypography.headline_small;
color: MaterialPalette.on_surface;
vertical_alignment: center;
}
for action[index] in root.actions : TextButton {
text: action;
clicked => {
root.action_clicked(index);
}
}
}
@children
}
}
Timer {
interval: 50ms;
triggered => {
background_layer.opacity = 1;
self.running = false;
}
}
}
export component BaseDialog {
in property <string> title;
in property <image> icon;
in property <[image]> action_button_icons;
in property <string> default_action_text;
in property <[string]> actions;
property <bool> has_icon: root.icon.width > 0 && root.icon.height > 0;
callback default_action_clicked();
callback action_button_clicked(index: int);
callback action_clicked(index: int);
callback close();
forward_focus: focus_scope;
focus_scope := FocusScope {
x: 0;
width: 0;
key_pressed(event) => {
if event.text == Key.Return && root.default_action_text != "" {
root.default_action_clicked();
return accept;
}
if event.text == Key.Escape {
root.close();
return accept;
}
reject
}
}
modal := Modal {
width: 100%;
height: 100%;
background_layer := Rectangle {
x: (parent.width - self.width) / 2;
y: (parent.height - self.height) / 2;
width: layout.min_width;
height: layout.min_height;
opacity: 0;
border_radius: MaterialStyleMetrics.border_radius_28;
background: MaterialPalette.surface_container_high;
TouchArea {
layout := VerticalLayout {
padding: MaterialStyleMetrics.padding_24;
spacing: MaterialStyleMetrics.spacing_16;
if root.has_icon : Icon {
x: (parent.width - self.width) / 2;
colorize: MaterialPalette.on_surface;
source: root.icon;
}
if root.title != "" : MaterialText {
horizontal_alignment: root.has_icon ? center : left;
text: root.title;
style: MaterialTypography.headline_small;
color: MaterialPalette.on_surface;
}
@children
HorizontalLayout {
spacing: MaterialStyleMetrics.spacing_8;
for action_button[index] in root.action_button_icons : IconButton {
icon: action_button;
clicked => {
root.action_button_clicked(index);
}
}
// Spacer
Rectangle {}
for action[index] in root.actions : TextButton {
text: action;
clicked => {
root.action_clicked(index);
}
}
if root.default_action_text != "" : FilledButton {
text: root.default_action_text;
clicked => {
root.default_action_clicked();
}
}
}
}
}
animate opacity { duration: MaterialAnimations.opacity_duration; easing: MaterialAnimations.opacity_easing; }
}
clicked => {
root.close();
}
}
Timer {
interval: 50ms;
triggered => {
background_layer.opacity = 1;
self.running = false;
}
}
}
export component Dialog inherits PopupWindow {
in property <string> title <=> base.title;
in property <image> icon <=> base.icon;
in property <string> default_action_text <=> base.default_action_text;
in property <[string]> actions <=> base.actions;
callback default_action_clicked <=> base.default_action_clicked;
callback action_clicked <=> base.action_clicked;
close_policy: no_auto_close;
forward_focus: base;
base := BaseDialog {
width: 100%;
height: 100%;
@children
close => {
root.close();
}
}
}

28
ui/ui/components/divider.slint Normal file
View File

@@ -0,0 +1,28 @@
// Copyright © SixtyFPS GmbH <info@slint.dev>
// SPDX-License-Identifier: MIT
import { MaterialPalette } from "../styling/material_palette.slint";
component BaseDivider {
Rectangle {
background: MaterialPalette.outline_variant;
}
}
export component VerticalDivider {
width: 1px;
BaseDivider {
width: 100%;
height: 100%;
}
}
export component HorizontalDivider {
height: 1px;
BaseDivider {
width: 100%;
height: 100%;
}
}

89
ui/ui/components/drawer.slint Normal file
View File

@@ -0,0 +1,89 @@
// Copyright © SixtyFPS GmbH <info@slint.dev>
// SPDX-License-Identifier: MIT
import { MaterialPalette } from "../styling/material_palette.slint";
import { MaterialStyleMetrics } from "../styling/material_style_metrics.slint";
import { MaterialTypography } from "../styling/material_typography.slint";
import { MaterialText } from "./material_text.slint";
import { MaterialAnimations } from "../styling/material_animations.slint";
import { Modal } from "./modal.slint";
export component DrawerHeader {
in property <string> title;
min_height: max(MaterialStyleMetrics.size_56, title_label.min_width);
title_label := MaterialText {
x: MaterialStyleMetrics.padding_16;
width: root.width - MaterialStyleMetrics.padding_16;
text: root.title;
color: MaterialPalette.on_surface_variant;
vertical_alignment: center;
style: MaterialTypography.title_small;
}
}
export component Drawer {
in property <string> title;
min_width: max(MaterialStyleMetrics.size_360, layout.min_width);
TouchArea {
Rectangle {
background: MaterialPalette.surface_container_low;
border_radius: MaterialStyleMetrics.border_radius_16;
layout := VerticalLayout {
alignment: start;
padding: MaterialStyleMetrics.padding_12;
if root.title != "" : DrawerHeader {
width: 100%;
title: root.title;
}
@children
}
}
}
}
export component ModalDrawer inherits PopupWindow {
in property <bool> position_right;
in property <string> title;
close_policy: no_auto_close;
modal := Modal {
width: 100%;
height: 100%;
drawer := Drawer {
x: root.position_right ? parent.width : -self.width;
y: 0;
height: 100%;
title: root.title;
@children
animate x {
duration: MaterialAnimations.standard_accelerate_duration;
easing: MaterialAnimations.standard_easing;
}
}
clicked => {
root.close();
}
}
Timer {
interval: 50ms;
triggered => {
drawer.x = root.position_right ? root.width - drawer.width : 0;
self.running = false;
}
}
}

125
ui/ui/components/drop_down_menu.slint Normal file
View File

@@ -0,0 +1,125 @@
// Copyright © SixtyFPS GmbH <info@slint.dev>
// SPDX-License-Identifier: MIT
import { TextField } from "./text_field.slint";
import { MenuItem } from "../items/menu_item.slint";
import { Icons } from "../icons/icons.slint";
import { MenuInner } from "./menu.slint";
import { StateLayer } from "./state_layer.slint";
import { MaterialPalette } from "../styling/material_palette.slint";
import { MaterialStyleMetrics } from "../styling/material_style_metrics.slint";
import { ScrollView } from "./scroll_view.slint";
export component DropDownMenu {
in property <string> label <=> text_field.label;
in property <bool> enabled <=> text_field.enabled;
in property <image> leading_icon <=> text_field.leading_icon;
in property <[MenuItem]> items;
in_out property <int> current_index: -1;
callback selected(index: int);
property <length> item_height: MaterialStyleMetrics.size_56;
property <int> max_displayed_items: 6;
property <string> text <=> text_field.text;
min_width: text_field.min_width;
min_height: text_field.min_height;
forward_focus: text_field; accessible-role: combobox;
accessible_enabled: root.enabled;
accessible_expandable: true;
accessible_value <=> text_field.text;
accessible_action_expand => { menu.show(); }
text_field := TextField {
width: 100%;
height: 100%;
trailing_icon: Icons.arrow_drop_down;
read_only: true;
}
state_layer := StateLayer {
width: 100%;
height: 100%;
background: MaterialPalette.on_surface;
has_hover: touch_area.has_hover;
enabled: root.enabled;
}
touch_area := TouchArea {
width: 100%;
height: 100%;
enabled: root.enabled;
clicked => {
menu.show();
}
}
menu := PopupWindow {
x: 0;
width: root.width;
close_policy: close_on_click_outside;
forward_focus: inner_text_field;
VerticalLayout {
alignment: start;
inner_text_field := TextField {
width: root.width;
leading_icon: root.leading_icon;
trailing_icon: Icons.arrow_drop_up;
text: root.text;
label: root.label;
read_only: true;
leading_icon_clicked => {
menu.close();
}
trailing_icon_clicked => {
menu.close();
}
}
Rectangle {
width: 100%;
height: min(max(root.item_height, items.length * root.item_height), root.max_displayed_items * root.item_height);
background: MaterialPalette.surface_container;
ScrollView {
VerticalLayout {
menu_inner := MenuInner {
current_index: root.current_index;
items: root.items;
activated(index) => {
root.update_selection(index);
}
}
}
}
}
}
}
function update_selection(index: int) {
root.update_text(index);
root.current_index = index;
menu.close();
root.selected(index);
}
function update_text(index: int) {
if index < 0 || root.current_index >= root.items.length {
text_field.text = "";
return;
}
text_field.text = root.items[index].text;
}
changed current_index => {
root.update_text(root.current_index);
}
}

Some files were not shown because too many files have changed in this diff Show More