RomanNum3ral
/
wayvr
mirror of https://github.com/wayvr-org/wayvr.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

dash-frontend: fix light theme everywhere

This commit is contained in:
Aleksander 2026-07-12 13:23:18 +02:00
parent cb99676230
commit e79dfcb719
23 changed files with 126 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
dash-frontend/assets/gui/dashboard.xml
View File

@ -12,12 +12,13 @@
round="100%"
width="~side_button_size"
height="~side_button_size"
color="background_contrast"
color="background_contrast(transparent)"
border_color="background_contrast"
hover_border_color="on_background_contrast"
tooltip="${tooltip}"
tooltip_side="${tooltip_side}"
>
<sprite src_builtin="${src_builtin}" width="~side_sprite_size" height="~side_sprite_size" />
<sprite src_builtin="${src_builtin}" width="~side_sprite_size" height="~side_sprite_size" color="on_background_contrast" />
</Button>
</template>
@ -45,7 +46,7 @@
<SideButton id="btn_side_apps" src_builtin="dashboard/apps.svg" tooltip="APPLICATIONS" tooltip_side="right" />
<SideButton id="btn_side_games" src_builtin="dashboard/games.svg" tooltip="GAMES" tooltip_side="right" />
<SideButton id="btn_side_monado" src_builtin="dashboard/monado.svg" tooltip="MONADO_RUNTIME" tooltip_side="right" />
<rectangle height="2" color="#FFFFFF33" width="~side_sprite_size" />
<rectangle height="2" color="outline" width="~side_sprite_size" />
<SideButton id="btn_side_settings" src_builtin="dashboard/settings.svg" tooltip="SETTINGS" tooltip_side="right" />
</rectangle>
</div>
@ -62,13 +63,13 @@
<!-- Title bar -->
<div width="100%" align_items="center" justify_content="center">
<rectangle min_width="300" height="100%" consume_mouse_events="1" round="100%" color="background_contrast" align_items="center" justify_content="center" gap="8">
<sprite id="sprite_titlebar_icon" width="24" height="24" />
<label id="label_titlebar_title" weight="bold" size="16" text="Title" />
<sprite id="sprite_titlebar_icon" width="24" height="24" color="on_background_contrast" />
<label id="label_titlebar_title" weight="bold" size="16" text="Title" color="on_background_contrast" />
</rectangle>
</div>
<!-- Close button -->
<Button position="absolute" id="btn_close" color="background_contrast" border_color="background_contrast" round="100%" width="~top_size" height="~top_size" tooltip="CLOSE_WINDOW" tooltip_side="left">
<sprite src_builtin="dashboard/close.svg" width="32" height="32" />
<sprite src_builtin="dashboard/close.svg" width="32" height="32" color="on_background_contrast" />
</Button>
</div>
@ -130,22 +131,22 @@
<!-- top shine -->
<div position="absolute" width="100%" height="100%" justify_content="center">
<rectangle position="absolute" width="99%" height="2" color="#FFFFFF22" round="4" />
<rectangle position="absolute" width="99%" height="2" color="highlight(opacity-0.2)" round="4" />
</div>
<!-- Left bottom side -->
<div margin_left="8">
<Button id="btn_audio" color="#FFFFFF00" border_color="#FFFFFF00" tooltip="AUDIO.VOLUME" tooltip_side="top">
<sprite src_builtin="dashboard/volume.svg" width="24" height="24" margin="8" />
<Button id="btn_audio" color="highlight(transparent)" border_color="highlight(transparent)" tooltip="AUDIO.VOLUME" tooltip_side="top">
<sprite src_builtin="dashboard/volume.svg" width="24" height="24" margin="8" color="on_background" />
</Button>
<Button id="btn_recenter" color="#FFFFFF00" border_color="#FFFFFF00" tooltip="ACTIONS.RECENTER_PLAYSPACE" tooltip_side="top">
<sprite src_builtin="dashboard/recenter.svg" width="24" height="24" margin="8" />
<Button id="btn_recenter" color="highlight(transparent)" border_color="highlight(transparent)" tooltip="ACTIONS.RECENTER_PLAYSPACE" tooltip_side="top">
<sprite src_builtin="dashboard/recenter.svg" width="24" height="24" margin="8" color="on_background" />
</Button>
</div>
<!-- Right bottom side -->
<div margin_right="16">
<label id="label_time" size="16" weight="light" color="on_background_contrast" />
<label id="label_time" weight="bold" size="16" color="on_background" />
</div>
</rectangle>
</div>

10
dash-frontend/assets/gui/t_group_box.xml
View File

@ -3,8 +3,8 @@
flex_direction="column"
align_items="baseline"
border="2"
color="#00000055"
border_color="#FFFFFF66"
color="background_contrast(opacity-0.5)"
border_color="outline"
padding="12"
gap="8"
round="8" />
@ -12,9 +12,9 @@
<!-- src_builtin, text, translation -->
<template name="GroupBoxTitle">
<div flex_direction="row" align_items="center" gap="8">
<sprite src_builtin="${src_builtin}" width="24" height="24" />
<label text="${text}" translation="${translation}" weight="bold" size="18" />
<sprite src_builtin="${src_builtin}" width="24" height="24" color="on_background" />
<label text="${text}" translation="${translation}" weight="bold" size="18" color="on_background" />
</div>
<rectangle color="#FFFFFF44" width="100%" height="2" />
<rectangle color="outline" width="100%" height="2" />
</template>
</layout>

4
dash-frontend/assets/gui/t_loading.xml
View File

@ -2,7 +2,7 @@
<template name="LoadingWithText">
<div id="root" width="100%" height="100%" align_items="center" justify_content="center">
<div flex_direction="row" gap="8" align_items="center" >
<sprite id="sprite_loading" src_builtin="dashboard/loading.svg" width="32" height="32"/>
<sprite id="sprite_loading" src_builtin="dashboard/loading.svg" width="32" height="32" color="on_background"/>
<label translation="LOADING" weight="bold"/>
</div>
</div>
@ -10,7 +10,7 @@
<template name="LoadingWithoutText">
<div id="root" width="100%" height="100%" align_items="center" justify_content="center">
<sprite id="sprite_loading" src_builtin="dashboard/loading.svg" width="32" height="32"/>
<sprite id="sprite_loading" src_builtin="dashboard/loading.svg" width="32" height="32" color="on_background"/>
</div>
</template>
</layout>

6
dash-frontend/assets/gui/tab/donate.xml
View File

@ -5,7 +5,7 @@
<template name="Avatar">
<div flex_direction="column" gap="12" align_items="center">
<image src_builtin="${icon}" width="72" height="72" round="100%" position="relative">
<rectangle position="absolute" margin_left="-2" margin_top="-2" width="76" height="76" color="#FFFFFF" round="100%"/>
<rectangle position="absolute" margin_left="-2" margin_top="-2" width="76" height="76" color="highlight" round="100%"/>
</image>
<label size="14" text="${nickname}"/>
</div>
@ -18,7 +18,7 @@
<div margin="32" flex_direction="column" align_items="center" justify_content="center" gap="16" height="100%">
<div gap="16" align_items="center" width="100%">
<sprite color="#FFAAAA" src_builtin="dashboard/donate.svg" min_width="64" min_height="64"/>
<label wrap="1" size="20" translation="DONATE.DESCRIPTION"/>
<label wrap="1" size="20" translation="DONATE.DESCRIPTION" color="on_background"/>
</div>
<div flex_direction="column" gap="8" align_items="center" margin_top="16">
@ -28,7 +28,7 @@
<label text="opencollective.com/wayvr-org"/>
</div>
<label weight="bold" size="24" translation="DONATE.THANK_YOU_WAYVR"/>
<label weight="bold" size="24" translation="DONATE.THANK_YOU_WAYVR" color="on_background"/>
<div gap="32" margin_top="16">
<Avatar icon="dashboard/avatars/galister.png" nickname="galister"/>

8
dash-frontend/assets/gui/tab/settings.xml
View File

@ -33,15 +33,15 @@
<template name="ButtonText">
<Button id="${id}" height="32" tooltip="${translation}_HELP" padding="4" gap="8">
<sprite src_builtin="${icon}" height="24" width="24" />
<label align="left" translation="${translation}" weight="bold" min_width="200" />
<sprite src_builtin="${icon}" height="24" width="24" color="on_background" />
<label align="left" translation="${translation}" weight="bold" min_width="200" color="on_background" />
</Button>
</template>
<template name="DangerButton">
<Button id="${id}" border_color="danger" color="danger(rgb-mult-0.5)" height="32" tooltip="${translation}_HELP" padding="4" gap="8">
<sprite src_builtin="${icon}" height="24" width="24" />
<label align="left" translation="${translation}" weight="bold" min_width="200" />
<sprite src_builtin="${icon}" height="24" width="24" color="on_danger" />
<label align="left" translation="${translation}" weight="bold" min_width="200" color="on_danger" />
</Button>
</template>

4
dash-frontend/assets/gui/tab/welcome_common.xml
View File

@ -3,13 +3,13 @@
<template name="PageTitle">
<div position="absolute" align_self="start" justify_self="center" width="100%" margin_top="16" gap="8" align_items="center" justify_content="center">
<sprite width="48" height="48" src_builtin="${icon}" color="#FFFFFF"/>
<label size="28" weight="bold" translation="${translation}" shadow="#000000" shadow_x="3" shadow_y="3" />
<label size="28" weight="bold" translation="${translation}" color="#FFFFFF" shadow="#000000" shadow_x="3" shadow_y="3" />
</div>
</template>
<!-- text -->
<template name="TextDesc">
<label wrap="1" translation="${translation}" size="20" width="500" shadow="#000000" weight="bold"/>
<label wrap="1" translation="${translation}" size="20" width="500" color="#FFFFFF" shadow="#000000" weight="bold"/>
</template>
<template name="TextDescBig">

4
dash-frontend/assets/gui/tab/welcome_page_0.xml
View File

@ -10,12 +10,12 @@
<label size="20" translation="WELCOME.GUIDE_INTRO"/>
<div gap="4" align_items="center" margin_top="8">
<sprite min_width="16" min_height="16" src_builtin="dashboard/info.svg"/>
<sprite min_width="16" min_height="16" src_builtin="dashboard/info.svg" color="on_background"/>
<label wrap="1" size="14" translation="WELCOME.REPOSITION_THIS_WINDOW_BY_GRABBING"/>
</div>
<div gap="4" align_items="center">
<sprite min_width="16" min_height="16" src_builtin="dashboard/info.svg"/>
<sprite min_width="16" min_height="16" src_builtin="dashboard/info.svg" color="on_background"/>
<label wrap="1" size="14" translation="WELCOME.LAST_PAGE_INFO"/>
</div>

4
dash-frontend/assets/gui/tab/welcome_page_3.xml
View File

@ -6,12 +6,12 @@
<div macro="video_overlay_content">
<PageTitle icon="dashboard/click.svg" translation="WELCOME.LASER_COLORS"/>
<div position="relative" flex_direction="row" gap="16" margin="16" align_self="end" justify_self="end" align_items="center">
<rectangle flex_direction="column" gap="8" padding="8" round="4" border_color="primary" border="2" >
<rectangle flex_direction="column" gap="8" padding="8" round="4" border_color="outline" border="2" >
<label size="12" weight="bold" color="#00FFFF" translation="WELCOME.REGULAR_MODE_BLUE_LASER"/>
<label size="12" weight="bold" color="#FFAA00" translation="WELCOME.RIGHT_CLICK_MODE_ORANGE_LASER"/>
<label size="12" weight="bold" color="#FF88FF" translation="WELCOME.MIDDLE_CLICK_MODE_PURPLE_LASER"/>
</rectangle>
<label wrap="1" size="18" width="450" weight="bold" shadow="#000000" translation="WELCOME.LASER_FUNCTIONALITY"/>
<label wrap="1" size="18" width="450" weight="bold" color="#ffffff" shadow="#000000" translation="WELCOME.LASER_FUNCTIONALITY"/>
</div>
</div>
</Video>

2
dash-frontend/assets/gui/tab/welcome_page_5.xml
View File

@ -20,7 +20,7 @@
<Button id="btn_home_screen" min_height="48" >
<sprite src_builtin="dashboard/check.svg" width="32" height="32" margin="8"/>
<label color="on_background_variant" size="20" weight="bold" translation="WELCOME.FINISH_TUTORIAL" margin_right="8" />
<label color="on_background" size="20" weight="bold" translation="WELCOME.FINISH_TUTORIAL" margin_right="8" />
</Button>
</div>
</div>

6
dash-frontend/assets/gui/view/app_launcher.xml
View File

@ -53,15 +53,15 @@
<div flex_direction="row" align_items="end" justify_content="center" gap="8" margin_top="8">
<Button id="btn_unpin" color="#997777" padding_left="8" padding_right="8" round="8" min_height="40">
<sprite src_builtin="dashboard/heart_minus.svg" width="32" height="32" />
<label translation="REMOVE_FROM_FAVOURITES" weight="bold" size="17" shadow="#00000099" />
<label translation="REMOVE_FROM_FAVOURITES" weight="bold" size="17" color="#FFFFFF" shadow="#00000099" />
</Button>
<Button id="btn_pin" color="#ce4477" border_color="#ce4477" padding_left="8" padding_right="8" round="8" min_height="40" tooltip="ADD_TO_FAVOURITES_HINT">
<sprite src_builtin="dashboard/heart_plus.svg" width="32" height="32" />
<label translation="ADD_TO_FAVOURITES" weight="bold" size="17" shadow="#00000099" />
<label translation="ADD_TO_FAVOURITES" weight="bold" size="17" color="#FFFFFF" shadow="#00000099" />
</Button>
<Button id="btn_launch" color="#44ce22" border_color="#44ce22" padding_left="8" padding_right="8" round="8" min_width="200" min_height="40">
<sprite src_builtin="dashboard/play.svg" width="32" height="32" />
<label translation="APP_LAUNCHER.LAUNCH" weight="bold" size="17" shadow="#00000099" />
<label translation="APP_LAUNCHER.LAUNCH" weight="bold" size="17" color="#FFFFFF" shadow="#00000099" />
</Button>
</div>
</div>

9
dash-frontend/assets/gui/view/audio_settings.xml
View File

@ -5,8 +5,8 @@
<template name="DeviceSlider">
<rectangle macro="group_box">
<div width="100%" align_items="center" justify_content="center" gap="8">
<sprite src_builtin="${device_icon}" width="16" height="16" />
<label text="${device_name}" margin_right="8" size="12" weight="bold" />
<sprite src_builtin="${device_icon}" width="16" height="16" color="on_background" />
<label text="${device_name}" margin_right="8" size="12" weight="bold" color="on_background" />
</div>
<div width="100%" align_items="center">
<CheckBox id="checkbox" />
@ -20,7 +20,7 @@
<template name="Card">
<rectangle macro="group_box">
<div width="100%" align_items="center" justify_content="center">
<label text="${card_name}" size="12" weight="bold" />
<label text="${card_name}" size="12" weight="bold" color="on_background" />
</div>
<Button id="btn_card" text="${profile_name}" width="100%" height="32" />
</rectangle>
@ -29,7 +29,7 @@
<template name="SelectAudioProfileText">
<div align_items="center" gap="8">
<Button width="48" height="32" id="btn_back">
<sprite src_builtin="dashboard/back.svg" width="24" height="24" />
<sprite src_builtin="dashboard/back.svg" width="24" height="24" color="on_background" />
</Button>
<label translation="AUDIO.SELECT_AUDIO_CARD_PROFILE" size="14" weight="bold" />
</div>
@ -59,6 +59,7 @@
min_width="32"
tooltip="AUDIO.AUTO_SWITCH_TO_VR_AUDIO"
color="primary"
sprite_color="on_primary"
tooltip_side="right" />
<BottomButton id="btn_sinks" src_builtin="dashboard/volume.svg" translation="AUDIO.SPEAKERS" />

4
dash-frontend/assets/gui/view/bindings.xml
View File

@ -14,7 +14,7 @@
<rectangle macro="group_box" id="${id}">
<!-- top row -->
<div flex_direction="row" gap="8" align_items="center">
<sprite src_builtin="dashboard/controller.svg" width="24" height="24"/>
<sprite src_builtin="dashboard/controller.svg" width="24" height="24" color="on_background"/>
<label translation="${translation}" color="primary" weight="bold" size="14" />
</div>
<!-- filled-in at runtime -->
@ -26,7 +26,7 @@
<div flex_direction="column" gap="8" align_items="center" overflow_y="scroll" width="100%" padding="16">
<div id="list_parent" flex_direction="column" gap="6" width="100%"></div>
</div>
<rectangle color="#000000cc" flex_direction="row" gap="8" justify_content="end" padding="8">
<rectangle color="background_contrast" flex_direction="row" gap="8" justify_content="end" padding="8">
<Button id="btn_cancel" sprite_src_builtin="dashboard/cancel.svg" min_width="100" height="32" translation="APP_SETTINGS.CANCEL" />
<Button id="btn_save" sprite_src_builtin="dashboard/check.svg" min_width="100" height="32" translation="APP_SETTINGS.SAVE" />
</rectangle>

2
dash-frontend/assets/gui/view/input_profiles.xml
View File

@ -2,7 +2,7 @@
<!-- id, text -->
<template name="InputProfileButton">
<Button id="${id}" width="350" gap="8" justify_content="start" >
<sprite margin_left="8" src_builtin="dashboard/controller.svg" min_width="24" min_height="24"/>
<sprite margin_left="8" src_builtin="dashboard/controller.svg" min_width="24" min_height="24" color="on_background"/>
<label text="${text}" weight="bold"/>
</Button>
</template>

2
dash-frontend/assets/gui/view/skymap_list_cell.xml
View File

@ -34,7 +34,7 @@
-->
<template name="ResolutionPip">
<rectangle color="${color}" padding_left="4" padding_right="4" padding_top="2" padding_bottom="2" round="3" align_self="start">
<label text="${text}" weight="bold" size="12" shadow="#000000" shadow_x="2" shadow_y="2"/>
<label text="${text}" weight="bold" size="12" color="#FFFFFF" shadow="#000000" shadow_x="2" shadow_y="2"/>
</rectangle>
</template>
</layout>

10
dash-frontend/src/tab/welcome.rs
View File

@ -2,6 +2,7 @@ use std::{marker::PhantomData, rc::Rc};
use wgui::{
assets::AssetPath,
color::WguiColorName,
components::button::ComponentButton,
globals::WguiGlobals,
layout::{Layout, WidgetID},
@ -110,7 +111,14 @@ impl<T> TabWelcome<T> {
for i in 0..PAGE_COUNT {
let mut params = TemplateParams::new();
let is_selected = i == self.current_page;
params.insert("COLOR", if is_selected { "#FFFFFF" } else { "#FFFFFF11" });
params.insert(
"COLOR",
if is_selected {
"primary"
} else {
"on_background(opacity-0.25)"
},
);
self
.state

2
dash-frontend/src/util/wgui_simple.rs
View File

@ -84,7 +84,7 @@ pub fn create_label_error(layout: &mut Layout, parent: WidgetID, content: String
pub fn create_icon(layout: &mut Layout, id_parent: WidgetID, size: Vec2, path: AssetPath) -> anyhow::Result<WidgetID> {
let widget_sprite = WidgetSprite::create(WidgetSpriteParams {
color: None,
color: Some(WguiColorName::OnBackground.into()),
glyph_data: Some(CustomGlyphData::from_assets(&layout.state.globals, path)?),
});

7
dash-frontend/src/views/audio_settings.rs
View File

@ -666,12 +666,13 @@ impl View {
let mut com = layout.common();
let mut perform = |btn_num: u8, btn: &Rc<ComponentButton>| {
let color = if num == btn_num {
WguiColorName::Primary
let (color, label_color) = if num == btn_num {
(WguiColorName::Primary, WguiColorName::OnPrimary)
} else {
WguiColorName::BackgroundVariant
(WguiColorName::BackgroundVariant, WguiColorName::OnBackgroundVariant)
};
btn.set_color(&mut com, color.into());
btn.set_label_color(&mut com, label_color.into());
};
perform(0, &self.btn_sinks);

12
wgui/src/components/button.rs
View File

@ -34,6 +34,7 @@ use taffy::{AlignItems, JustifyContent, prelude::length};
pub struct Params<'a> {
pub text: Option<Translation>, // if unset, label will not be populated
pub sprite_src: Option<AssetPath<'a>>,
pub sprite_color: Option<WguiColor>,
pub color: Option<WguiColor>,
pub border: f32,
pub border_color: Option<WguiColor>,
@ -53,6 +54,7 @@ pub struct Params<'a> {
impl Default for Params<'_> {
fn default() -> Self {
Self {
sprite_color: None,
text: Some(Translation::from_raw_text("")),
sprite_src: None,
color: None,
@ -171,6 +173,13 @@ impl ComponentButton {
state.colors.color = color;
}
pub fn set_label_color(&self, common: &mut CallbackDataCommon, color: WguiColor) {
let Some(mut label) = common.state.widgets.get_as::<WidgetLabel>(self.data.id_label) else {
return;
};
label.set_color(common, color, true);
}
pub fn get_time_since_last_pressed(&self) -> Duration {
self.state.borrow().last_pressed.elapsed()
}
@ -498,7 +507,7 @@ pub fn construct(ess: &mut ConstructEssentials, params: Params) -> anyhow::Resul
if let Some(sprite_path) = params.sprite_src {
let sprite = WidgetSprite::create(WidgetSpriteParams {
glyph_data: Some(CustomGlyphData::from_assets(&ess.layout.state.globals, sprite_path)?),
..Default::default()
color: Some(params.sprite_color.unwrap_or(WguiColorName::OnBackground.into())),
});
ess.layout.add_child(
@ -522,6 +531,7 @@ pub fn construct(ess: &mut ConstructEssentials, params: Params) -> anyhow::Resul
content,
style: TextStyle {
weight: Some(FontWeight::Bold),
color: Some(WguiColorName::OnBackground.into()),
..params.text_style
},
},

3
wgui/src/components/checkbox.rs
View File

@ -385,7 +385,7 @@ pub fn construct(ess: &mut ConstructEssentials, params: Params) -> anyhow::Resul
id_container,
WidgetRectangle::create(WidgetRectangleParams {
border: 2.0,
border_color: WguiColorName::OnPrimary.into(),
border_color: WguiColorName::OnBackground.into(),
round: round_8,
color: WguiColor::from(WguiColorName::OnPrimary).with_alpha(0.0),
..Default::default()
@ -425,6 +425,7 @@ pub fn construct(ess: &mut ConstructEssentials, params: Params) -> anyhow::Resul
content: params.text,
style: TextStyle {
weight: Some(FontWeight::Bold),
color: Some(WguiColorName::OnBackground.into()),
..Default::default()
},
},

19
wgui/src/components/tabs.rs
View File

@ -65,14 +65,20 @@ impl ComponentTrait for ComponentTabs {
}
}
fn set_button_selected(common: &mut CallbackDataCommon, button: &Rc<ComponentButton>, selected: bool) {
if selected {
button.set_color(common, WguiColorName::Primary.into());
button.set_label_color(common, WguiColorName::OnPrimary.into());
} else {
button.set_color(common, WguiColorName::Background.into());
button.set_label_color(common, WguiColorName::OnBackground.into());
}
}
impl State {
fn select_entry(&mut self, common: &mut CallbackDataCommon, name: &Rc<str>) {
for entry in &self.mounted_entries {
if *entry.name == **name {
entry.button.set_color(common, WguiColorName::Primary.into());
} else {
entry.button.set_color(common, WguiColorName::BackgroundVariant.into());
}
set_button_selected(common, &entry.button, *entry.name == **name);
}
self.selected_entry_name = name.clone();
@ -138,6 +144,9 @@ pub fn construct(ess: &mut ConstructEssentials, params: Params) -> anyhow::Resul
},
)?;
// init colors
set_button_selected(&mut ess.layout.common(), &button, false);
mounted_entries.push(MountedEntry {
name: Rc::from(entry.name),
button,

56
wgui/src/palette.rs
View File

@ -152,7 +152,7 @@ static AYU: &WguiColorPalette = &WguiColorPalette {
hex("#BFBDB6"), // OnBackgroundContrast
hex("#565B66"), // Outline
hex("#000000"), // Shadow
hex("#242936"), // Highlight
hex("#ffffff"), // Highlight
],
};
@ -174,7 +174,7 @@ static AYU_LIGHT: &WguiColorPalette = &WguiColorPalette {
hex("#5C6166"), // OnBackgroundContrast
hex("#8A9199"), // Outline
hex("#F8F9FA"), // Shadow
hex("#FFFFFF"), // Highlight
hex("#000000"), // Highlight
],
};
@ -196,7 +196,7 @@ static CATTPUCCIN: &WguiColorPalette = &WguiColorPalette {
hex("#cdd6f4"), // OnBackgroundContrast
hex("#4c4f69"), // Outline
hex("#11111b"), // Shadow
hex("#45475a"), // Highlight
hex("#ffffff"), // Highlight
],
};
@ -218,7 +218,7 @@ static CATTPUCCIN_LIGHT: &WguiColorPalette = &WguiColorPalette {
hex("#4C4F69"), // OnBackgroundContrast
hex("#A5ADCB"), // Outline
hex("#DCE0E8"), // Shadow
hex("#E6E9EF"), // Highlight
hex("#000000"), // Highlight
],
};
@ -240,7 +240,7 @@ static CYBERPUNK: &WguiColorPalette = &WguiColorPalette {
hex("#5C8AC4"), // OnBackgroundContrast
hex("#45A0D6"), // Outline
hex("#090D13"), // Shadow
hex("#17202C"), // Highlight
hex("#ffffff"), // Highlight
],
};
@ -262,7 +262,7 @@ static CYBERPUNK_LIGHT: &WguiColorPalette = &WguiColorPalette {
hex("#1A1914"), // OnBackgroundContrast
hex("#7B52AB"), // Outline
hex("#B8D4E6"), // Shadow
hex("#EAF3F5"), // Highlight
hex("#000000"), // Highlight
],
};
@ -284,7 +284,7 @@ static DRACULA: &WguiColorPalette = &WguiColorPalette {
hex("#F8F8F2"), // OnBackgroundContrast
hex("#5A5E77"), // Outline
hex("#282A36"), // Shadow
hex("#343746"), // Highlight
hex("#ffffff"), // Highlight
],
};
@ -306,7 +306,7 @@ static DRACULA_LIGHT: &WguiColorPalette = &WguiColorPalette {
hex("#282A36"), // OnBackgroundContrast
hex("#CACAD3"), // Outline
hex("#D6D8E0"), // Shadow
hex("#DDDDE4"), // Highlight
hex("#000000"), // Highlight
],
};
@ -328,7 +328,7 @@ static ELDRITCH: &WguiColorPalette = &WguiColorPalette {
hex("#EBFAFA"), // OnBackgroundContrast
hex("#3B4261"), // Outline
hex("#414868"), // Shadow
hex("#343A52"), // Highlight
hex("#ffffff"), // Highlight
],
};
@ -350,7 +350,7 @@ static ELDRITCH_LIGHT: &WguiColorPalette = &WguiColorPalette {
hex("#171928"), // OnBackgroundContrast
hex("#B0B6C3"), // Outline
hex("#E0E3E8"), // Shadow
hex("#E8EBF2"), // Highlight
hex("#000000"), // Highlight
],
};
@ -372,7 +372,7 @@ static EVERFOREST: &WguiColorPalette = &WguiColorPalette {
hex("#D3C6AA"), // OnBackgroundContrast
hex("#D3C6AA"), // Outline
hex("#475258"), // Shadow
hex("#343F44"), // Highlight
hex("#ffffff"), // Highlight
],
};
@ -394,7 +394,7 @@ static EVERFOREST_LIGHT: &WguiColorPalette = &WguiColorPalette {
hex("#232A2E"), // OnBackgroundContrast
hex("#232A2E"), // Outline
hex("#ECF5ED"), // Shadow
hex("#D3C6AA"), // Highlight
hex("#000000"), // Highlight
],
};
@ -416,7 +416,7 @@ static GRUVBOX: &WguiColorPalette = &WguiColorPalette {
hex("#FBF1C7"), // OnBackgroundContrast
hex("#57514E"), // Outline
hex("#282828"), // Shadow
hex("#504945"), // Highlight
hex("#ffffff"), // Highlight
],
};
@ -438,7 +438,7 @@ static GRUVBOX_LIGHT: &WguiColorPalette = &WguiColorPalette {
hex("#3C3836"), // OnBackgroundContrast
hex("#BDAE93"), // Outline
hex("#D5C4A1"), // Shadow
hex("#DCCFA8"), // Highlight
hex("#000000"), // Highlight
],
};
@ -460,7 +460,7 @@ static KANAGAWA: &WguiColorPalette = &WguiColorPalette {
hex("#C8C093"), // OnBackgroundContrast
hex("#363646"), // Outline
hex("#1F1F28"), // Shadow
hex("#363646"), // Highlight
hex("#ffffff"), // Highlight
],
};
@ -482,7 +482,7 @@ static KANAGAWA_LIGHT: &WguiColorPalette = &WguiColorPalette {
hex("#545464"), // OnBackgroundContrast
hex("#CFC49C"), // Outline
hex("#F2ECBC"), // Shadow
hex("#E7DBA0"), // Highlight
hex("#000000"), // Highlight
],
};
@ -504,7 +504,7 @@ static MONOCHROME: &WguiColorPalette = &WguiColorPalette {
hex("#828282"), // OnBackgroundContrast
hex("#3C3C3C"), // Outline
hex("#000000"), // Shadow
hex("#242424"), // Highlight
hex("#ffffff"), // Highlight
],
};
@ -526,7 +526,7 @@ static MONOCHROME_LIGHT: &WguiColorPalette = &WguiColorPalette {
hex("#555555"), // OnBackgroundContrast
hex("#C3C3C3"), // Outline
hex("#FAFAFA"), // Shadow
hex("#F2F2F2"), // Highlight
hex("#000000"), // Highlight
],
};
@ -548,7 +548,7 @@ static NORD: &WguiColorPalette = &WguiColorPalette {
hex("#ECEFF4"), // OnBackgroundContrast
hex("#505A70"), // Outline
hex("#2E3440"), // Shadow
hex("#434C5E"), // Highlight
hex("#ffffff"), // Highlight
],
};
@ -570,7 +570,7 @@ static NORD_LIGHT: &WguiColorPalette = &WguiColorPalette {
hex("#2E3440"), // OnBackgroundContrast
hex("#C5CEDD"), // Outline
hex("#D8DEE9"), // Shadow
hex("#F5F7FA"), // Highlight
hex("#000000"), // Highlight
],
};
@ -592,7 +592,7 @@ static OSAKA_JADE: &WguiColorPalette = &WguiColorPalette {
hex("#A6B5B1"), // OnBackgroundContrast
hex("#1B6352"), // Outline
hex("#040A09"), // Shadow
hex("#16382F"), // Highlight
hex("#ffffff"), // Highlight
],
};
@ -614,7 +614,7 @@ static OSAKA_JADE_LIGHT: &WguiColorPalette = &WguiColorPalette {
hex("#263731"), // OnBackgroundContrast
hex("#5C7A6A"), // Outline
hex("#8A9E90"), // Shadow
hex("#C2D2C6"), // Highlight
hex("#000000"), // Highlight
],
};
@ -636,7 +636,7 @@ static ROSEPINE: &WguiColorPalette = &WguiColorPalette {
hex("#E0DEF4"), // OnBackgroundContrast
hex("#403D52"), // Outline
hex("#191724"), // Shadow
hex("#403D52"), // Highlight
hex("#ffffff"), // Highlight
],
};
@ -658,7 +658,7 @@ static ROSEPINE_LIGHT: &WguiColorPalette = &WguiColorPalette {
hex("#575279"), // OnBackgroundContrast
hex("#DFDAD9"), // Outline
hex("#FAF4ED"), // Shadow
hex("#FFFFFF"), // Highlight
hex("#000000"), // Highlight
],
};
@ -680,7 +680,7 @@ static SOLARIZED_NIGHT: &WguiColorPalette = &WguiColorPalette {
hex("#839496"), // OnBackgroundContrast
hex("#0C5C70"), // Outline
hex("#002B36"), // Shadow
hex("#0A4050"), // Highlight
hex("#ffffff"), // Highlight
],
};
@ -702,7 +702,7 @@ static SOLARIZED_DAY: &WguiColorPalette = &WguiColorPalette {
hex("#657B83"), // OnBackgroundContrast
hex("#DFD4B1"), // Outline
hex("#EEE8D5"), // Shadow
hex("#FFFDF5"), // Highlight
hex("#000000"), // Highlight
],
};
@ -724,7 +724,7 @@ static TOKYO_NIGHT: &WguiColorPalette = &WguiColorPalette {
hex("#C0CAF5"), // OnBackgroundContrast
hex("#565F89"), // Outline
hex("#15161E"), // Shadow
hex("#2F3549"), // Highlight
hex("#ffffff"), // Highlight
],
};
@ -746,6 +746,6 @@ static TOKYO_DAY: &WguiColorPalette = &WguiColorPalette {
hex("#3760BF"), // OnBackgroundContrast
hex("#B4B5B9"), // Outline
hex("#A8AECB"), // Shadow
hex("#F0F1F5"), // Highlight
hex("#000000"), // Highlight
],
};

5
wgui/src/parser/component_button.rs
View File

@ -22,6 +22,7 @@ pub fn parse_component_button<'a>(
tag_name: &str,
) -> anyhow::Result<WidgetID> {
let mut color: Option<WguiColor> = None;
let mut sprite_color: Option<WguiColor> = None;
let mut border = 2.0;
let mut border_color: Option<WguiColor> = None;
let mut hover_color: Option<WguiColor> = None;
@ -63,6 +64,9 @@ pub fn parse_component_button<'a>(
"color" => {
parse_color_opt(ctx, tag_name, key, value, &mut color);
}
"sprite_color" => {
parse_color_opt(ctx, tag_name, key, value, &mut sprite_color);
}
"border" => {
ctx.parse_check_f32(tag_name, key, value, &mut border);
}
@ -98,6 +102,7 @@ pub fn parse_component_button<'a>(
let (widget, button) = button::construct(
&mut ctx.get_construct_essentials(parent_id),
button::Params {
sprite_color,
color,
border,
border_color,

10
wgui/src/parser/style.rs
View File

@ -4,7 +4,7 @@ use taffy::{
};
use crate::{
color::WguiColor,
color::{WguiColor, WguiColorName},
drawing,
parser::{AttribPair, ParserContext, is_percent, parse_f32},
renderer_vk::text::{FontWeight, HorizontalAlign, TextStyle},
@ -61,12 +61,14 @@ pub fn parse_color_opt(
}
pub fn parse_text_style(ctx: &ParserContext<'_>, attribs: &[AttribPair], tag_name: &str, prefix: &str) -> TextStyle {
let mut style = TextStyle::default();
let mut style = TextStyle {
color: Some(WguiColorName::OnBackground.into()),
..Default::default()
};
for pair in attribs {
let (key, value) = (pair.attrib.as_ref(), pair.value.as_ref());
if key.starts_with(prefix) {
let suffix = &key[prefix.len()..];
if let Some(suffix) = key.strip_prefix(prefix) {
match suffix {
"color" => {
parse_color_opt(ctx, tag_name, key, value, &mut style.color);