standardize button colors

This commit is contained in:
galister 2026-07-13 13:07:54 +09:00
parent 075a6dd63b
commit d311813899
14 changed files with 45 additions and 54 deletions

View File

@ -14,10 +14,6 @@
height="~side_button_size"
color="background_contrast(transparent)"
border_color="background_contrast"
hover_color="tertiary"
hover_border_color="tertiary(rgb-mult-0.5)"
sticky_color="primary"
sticky_border_color="primary(rgb-mult-0.5)"
tooltip="${tooltip}"
tooltip_side="${tooltip_side}"
>
@ -25,8 +21,6 @@
</Button>
</template>
<macro name="button_style" sticky_color="primary" sticky_border_color="primary(rgb-mult-0.5)" hover_color="tertiary" hover_border_color="tertiary(rgb-mult-0.5)" />
<elements>
<!-- left/right separator (menu and rest) -->
<div flex_direction="row" gap="8" width="100%" height="100%" padding="4" interactable="0">
@ -73,8 +67,9 @@
</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" color="on_background_contrast" />
<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"
hover_color="danger" hover_border_color="danger(rgb-mult-0.5)" >
<sprite src_builtin="dashboard/close.svg" width="32" height="32" />
</Button>
</div>
@ -141,11 +136,11 @@
<!-- Left bottom side -->
<div margin_left="8">
<Button macro="button_style" 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 id="btn_audio" color="background(transparent)" border_color="background(transparent)" tooltip="AUDIO.VOLUME" tooltip_side="top">
<sprite src_builtin="dashboard/volume.svg" width="24" height="24" margin="8" />
</Button>
<Button macro="button_style" 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 id="btn_recenter" color="background(transparent)" border_color="background(transparent)" tooltip="ACTIONS.RECENTER_PLAYSPACE" tooltip_side="top">
<sprite src_builtin="dashboard/recenter.svg" width="24" height="24" margin="8" />
</Button>
</div>

View File

@ -2,8 +2,8 @@
<macro name="dropdown_button"
flex_direction="row"
border="2"
color="#00000055"
border_color="#FFFFFF66"
color="background"
border_color="outline"
justify_content="space_between" />
<!-- id, text, translation, tooltip, min_width -->

View File

@ -1,12 +1,10 @@
<layout>
<macro name="tab_style" color="background" sticky_color="primary" sticky_border_color="primary(rgb-mult-0.5)" hover_color="tertiary" hover_border_color="tertiary(rgb-mult-0.5)" />
<elements>
<div gap="4">
<Tabs id="tabs">
<Tab macro="tab_style" name="general_settings" translation="GENERAL_SETTINGS" sprite_src_builtin="dashboard/settings.svg" />
<Tab macro="tab_style" name="process_list" translation="PROCESS_LIST" sprite_src_builtin="dashboard/cpu.svg" />
<Tab macro="tab_style" name="debug_timings" translation="DEBUG_INFO" sprite_src_builtin="dashboard/not_a_bug.svg" />
<Tab name="general_settings" translation="GENERAL_SETTINGS" sprite_src_builtin="dashboard/settings.svg" />
<Tab name="process_list" translation="PROCESS_LIST" sprite_src_builtin="dashboard/cpu.svg" />
<Tab name="debug_timings" translation="DEBUG_INFO" sprite_src_builtin="dashboard/not_a_bug.svg" />
</Tabs>
<div gap="4" id="content" width="100%">
<!-- filled-in at runtime -->

View File

@ -47,7 +47,8 @@
<template name="AutostartApp">
<div id="${id}_root" flex_direction="row">
<Button id="${id}" color="#AA3333" height="24" padding="4" margin_top="-2" margin_bottom="-2">
<Button id="${id}" color="#AA3333" height="24" padding="4" margin_top="-2" margin_bottom="-2"
hover_color="danger" hover_border_color="danger(rgb-mult-0.5)" >
<sprite src_builtin="dashboard/close.svg" height="20" width="20" />
</Button>
<div padding_left="8">
@ -56,7 +57,7 @@
</div>
</template>
<macro name="tab_style" color="background" sticky_color="primary" sticky_border_color="primary(rgb-mult-0.5)" hover_color="tertiary" hover_border_color="tertiary(rgb-mult-0.5)" />
<macro name="tab_style" color="background" />
<elements>
<div gap="4">

View File

@ -20,7 +20,8 @@
</Button>
<Button macro="window_button" _release="::DecorCloseWindow"
border_color="danger" color="danger">
color="danger" border_color="danger(rgb-mult-0.5)"
hover_color="danger(rgb-add-0.2)" hover_border_color="danger">
<sprite macro="window_button_icon" src="edit/close.svg" />
</Button>
</div>

View File

@ -10,14 +10,14 @@
</template>
<template name="TopButtonDanger">
<Button macro="button_style" tooltip="${tooltip}" _release="${release}" border_color="danger" color="danger">
<Button macro="button_style" tooltip="${tooltip}" _release="${release}" border_color="danger(rgb-mult-0.5)" color="danger" hover_color="danger(rgb-add-0.2)" hover_border_color="danger">
<sprite width="48" height="48" src="${src}" />
</Button>
</template>
<template name="TopButtonTertiary">
<Button macro="button_style" tooltip="${tooltip}" _press="${press}" _release="${release}" color="tertiary" border_color="tertiary">
<sprite color="on_tertiary" width="48" height="48" src="${src}" />
<Button macro="button_style" tooltip="${tooltip}" _press="${press}" _release="${release}" color="tertiary" border_color="tertiary(rgb-mult-0.5)" hover_color="tertiary(rgb-add-0.2)" hover_border_color="tertiary">
<sprite width="48" height="48" src="${src}" />
</Button>
</template>

View File

@ -95,8 +95,7 @@
</template>
<macro name="button_style" border="2" round="6"
align_items="center" justify_content="center" padding="6" width="60" height="60" overflow="visible"
sticky_color="primary" sticky_border_color="primary(rgb-mult-0.5)" hover_color="tertiary" hover_border_color="tertiary(rgb-mult-0.5)" />
align_items="center" justify_content="center" padding="6" width="60" height="60" overflow="visible" />
<macro name="bg_rect" width="100%" color="background_contrast" round="10" border="2" border_color="primary" />

View File

@ -11,8 +11,7 @@
padding="8" color="background"
border="2" border_color="outline" round="8" />
<macro name="button_style" padding="8" border="2" round="8" align_items="center" justify_content="center"
sticky_color="primary" sticky_border_color="primary(rgb-mult-0.5)" hover_color="tertiary" hover_border_color="tertiary(rgb-mult-0.5)" />
<macro name="button_style" padding="8" border="2" round="8" align_items="center" justify_content="center" />
<template name="Device">
<rectangle macro="decorative_rect" padding_top="4" padding_bottom="4" align_items="center" gap="8">

View File

@ -1,7 +1,6 @@
<layout>
<macro name="button_style" border="2" round="6"
align_items="center" justify_content="center" padding="6" width="60" height="60" overflow="visible"
sticky_color="primary" sticky_border_color="primary(rgb-mult-0.5)" hover_color="tertiary" hover_border_color="tertiary(rgb-mult-0.5)" />
align_items="center" justify_content="center" padding="6" width="60" height="60" overflow="visible" />
<macro name="bg_rect" width="100%" color="background" border_color="outline" round="10" border="2" />
@ -33,7 +32,8 @@
</Button>
</div>
<div gap="10">
<Button macro="button_style" _press="::WhisperUnloadAndClose" tooltip="WHISPER.UNLOAD_AND_CLOSE" tooltip_side="left">
<Button macro="button_style" _press="::WhisperUnloadAndClose" tooltip="WHISPER.UNLOAD_AND_CLOSE" tooltip_side="left"
hover_color="danger" hover_border_color="danger(rgb-mult-0.5)">
<sprite width="38" height="38" src_builtin="edit/close.svg" />
</Button>
</div>

View File

@ -1,7 +1,7 @@
<layout>
<!-- text: str -->
<template name="Cell">
<Button id="button" text="${text}" tooltip_str="${tooltip_str}" weight="bold" border="0" padding="4" color="background(transparent)" hover_color="primary" height="24" justify_content="start" />
<Button id="button" text="${text}" tooltip_str="${tooltip_str}" weight="bold" border="0" padding="4" color="background(transparent)" height="24" justify_content="start" />
</template>
<template name="Separator">

View File

@ -19,8 +19,9 @@
<div width="100%" justify_content="center">
<label id="text_window_title" weight="bold" color="on_background" />
</div>
<Button id="but_close" border="0" round="4" color="on_background(transparent)" hover_color="primary" position="absolute">
<sprite src_internal="wgui/close.svg" width="32" height="32" color="on_background" />
<Button id="but_close" border="0" round="4" color="on_background(transparent)" position="absolute"
hover_color="danger" hover_border_color="danger(rgb-mult-0.5)" >
<sprite src_internal="wgui/close.svg" width="32" height="32" />
</Button>
</div>

View File

@ -541,6 +541,13 @@ fn register_event_mouse_release(
)
}
const DEFAULT_COLOR: WguiColor = WguiColorName::BackgroundVariant.to_wgui_color();
const DEFAULT_BORDER_COLOR: WguiColor = WguiColorName::Outline.to_wgui_color();
const DEFAULT_HOVER_COLOR: WguiColor = WguiColorName::Tertiary.to_wgui_color();
const DEFAULT_HOVER_BORDER_COLOR: WguiColor = WguiColorName::Tertiary.to_wgui_color().mult_rgb(0.5);
const DEFAULT_STICKY_COLOR: WguiColor = WguiColorName::Primary.to_wgui_color();
const DEFAULT_STICKY_BORDER_COLOR: WguiColor = WguiColorName::Primary.to_wgui_color().mult_rgb(0.5);
pub fn construct(ess: &mut ConstructEssentials, params: Params) -> anyhow::Result<(WidgetPair, Rc<ComponentButton>)> {
let mut style = params.style;
let theme = &ess.layout.state.theme;
@ -557,27 +564,17 @@ pub fn construct(ess: &mut ConstructEssentials, params: Params) -> anyhow::Resul
let globals = ess.layout.state.globals.get();
// update colors to default ones if they are not specified
let color = params.color.unwrap_or_else(|| WguiColorName::BackgroundVariant.into());
let color = params.color.unwrap_or(DEFAULT_COLOR);
let border_color = params
.border_color
.unwrap_or_else(|| WguiColor::from(WguiColorName::Outline));
let border_color = params.border_color.unwrap_or(DEFAULT_BORDER_COLOR);
let hover_color = params
.hover_color
.unwrap_or_else(|| color.add_rgb(0.25).add_alpha(0.15));
let hover_color = params.hover_color.unwrap_or(DEFAULT_HOVER_COLOR);
let hover_border_color = params
.hover_border_color
.unwrap_or_else(|| border_color.add_rgb(0.5).add_alpha(0.5));
let hover_border_color = params.hover_border_color.unwrap_or(DEFAULT_HOVER_BORDER_COLOR);
let sticky_color = params
.sticky_color
.unwrap_or_else(|| color.add_rgb(0.15).add_alpha(0.1));
let sticky_color = params.sticky_color.unwrap_or(DEFAULT_STICKY_COLOR);
let sticky_border_color = params
.sticky_border_color
.unwrap_or_else(|| border_color.add_rgb(0.25).add_alpha(0.35));
let sticky_border_color = params.sticky_border_color.unwrap_or(DEFAULT_STICKY_BORDER_COLOR);
let gradient_intensity = theme.gradient_intensity;

View File

@ -352,7 +352,7 @@ const BODY_BORDER_COLOR: WguiColor = WguiColorName::Outline.to_wgui_color();
const HANDLE_COLOR: WguiColorName = WguiColorName::BackgroundVariant;
const HANDLE_COLOR_HOVERED: WguiColor = WguiColorName::Tertiary.to_wgui_color();
const HANDLE_BORDER_COLOR: WguiColor = WguiColorName::Outline.to_wgui_color();
const HANDLE_BORDER_COLOR_HOVERED: WguiColor = WguiColorName::OnTertiary.to_wgui_color();
const HANDLE_BORDER_COLOR_HOVERED: WguiColor = WguiColorName::Tertiary.to_wgui_color().mult_rgb(0.5);
const HANDLE_TEXT_COLOR: WguiColorName = WguiColorName::OnBackgroundVariant;
const HANDLE_TEXT_COLOR_HOVERED: WguiColorName = WguiColorName::OnSecondary;

View File

@ -4,12 +4,12 @@ use crate::{
};
use super::{
ContentType, FontSystem, GlyphDetails, GpuCacheStatus, SwashCache, TextArea,
custom_glyph::{CustomGlyphCacheKey, RasterizeCustomGlyphRequest, RasterizedCustomGlyph},
text_atlas::{GlyphVertex, TextAtlas, TextPipeline},
ContentType, FontSystem, GlyphDetails, GpuCacheStatus, SwashCache, TextArea,
};
use cosmic_text::{Color, SubpixelBin, SwashContent};
use etagere::{size2, AllocId};
use etagere::{AllocId, size2};
use glam::{Mat4, Vec2, Vec3};
use std::collections::HashSet;