Skip to content

Commit

Permalink
Improve the default project theme
Browse files Browse the repository at this point in the history 
The new default project theme uses StyleBoxFlat extensively for
a more modern design and better scalability to multiple resolutions.

SVG icons are now used in place of PNG icons. While this does not
allow for true vector-based icon drawing (icons are still rasterized
at load-time), this makes the design work easier for contributors
and opens the door to vector drawing in the future (e.g. with polygons
or SDFs).

Like for editor icons, the SVG header file is now built automatically
when a SVG file is changed. This removing the need for running
`make_header.py` manually (TODO).

The "Use Hidpi" project setting has been removed in favor of a
"Default Theme Scale" project setting, which allows creating the
default theme at a higher/lower scale than the default.
This can be used when designing GUIs with a high base resolution
to ensure crisp visuals.

Co-authored-by: Yuri Sizov <yuris@humnom.net>
  • Loading branch information
@Calinou @YuriSizov
Calinou and YuriSizov committed Jan 19, 2022
1 parent 249c60e commit 84a69d7
Show file tree
Hide file tree
Showing 228 changed files with 611 additions and 1,102 deletions.
8 changes: 4 additions & 4 deletions doc/classes/Button.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -94,16 +94,16 @@
</member>
</members>
<theme_items>
<theme_item name="font_color" data_type="color" type="Color" default="Color(0.88, 0.88, 0.88, 1)">
<theme_item name="font_color" data_type="color" type="Color" default="Color(0.875, 0.875, 0.875, 1)">
Default text [Color] of the [Button].
</theme_item>
<theme_item name="font_disabled_color" data_type="color" type="Color" default="Color(0.9, 0.9, 0.9, 0.2)">
<theme_item name="font_disabled_color" data_type="color" type="Color" default="Color(0.875, 0.875, 0.875, 0.5)">
Text [Color] used when the [Button] is disabled.
</theme_item>
<theme_item name="font_focus_color" data_type="color" type="Color" default="Color(0.94, 0.94, 0.94, 1)">
<theme_item name="font_focus_color" data_type="color" type="Color" default="Color(0.95, 0.95, 0.95, 1)">
Text [Color] used when the [Button] is focused. Only replaces the normal text color of the button. Disabled, hovered, and pressed states take precedence over this color.
</theme_item>
<theme_item name="font_hover_color" data_type="color" type="Color" default="Color(0.94, 0.94, 0.94, 1)">
<theme_item name="font_hover_color" data_type="color" type="Color" default="Color(0.95, 0.95, 0.95, 1)">
Text [Color] used when the [Button] is being hovered.
</theme_item>
<theme_item name="font_hover_pressed_color" data_type="color" type="Color" default="Color(1, 1, 1, 1)">
Expand Down
8 changes: 4 additions & 4 deletions doc/classes/CheckBox.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,16 +14,16 @@
<member name="toggle_mode" type="bool" setter="set_toggle_mode" getter="is_toggle_mode" overrides="BaseButton" default="true" />
</members>
<theme_items>
<theme_item name="font_color" data_type="color" type="Color" default="Color(0.88, 0.88, 0.88, 1)">
<theme_item name="font_color" data_type="color" type="Color" default="Color(0.875, 0.875, 0.875, 1)">
The [CheckBox] text's font color.
</theme_item>
<theme_item name="font_disabled_color" data_type="color" type="Color" default="Color(0.9, 0.9, 0.9, 0.2)">
<theme_item name="font_disabled_color" data_type="color" type="Color" default="Color(0.875, 0.875, 0.875, 0.5)">
The [CheckBox] text's font color when it's disabled.
</theme_item>
<theme_item name="font_focus_color" data_type="color" type="Color" default="Color(0.94, 0.94, 0.94, 1)">
<theme_item name="font_focus_color" data_type="color" type="Color" default="Color(0.95, 0.95, 0.95, 1)">
The [CheckBox] text's font color when it's focused. Only replaces the normal text color of the checkbox. Disabled, hovered, and pressed states take precedence over this color.
</theme_item>
<theme_item name="font_hover_color" data_type="color" type="Color" default="Color(0.94, 0.94, 0.94, 1)">
<theme_item name="font_hover_color" data_type="color" type="Color" default="Color(0.95, 0.95, 0.95, 1)">
The [CheckBox] text's font color when it's hovered.
</theme_item>
<theme_item name="font_hover_pressed_color" data_type="color" type="Color" default="Color(1, 1, 1, 1)">
Expand Down
8 changes: 4 additions & 4 deletions doc/classes/CheckButton.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,16 +14,16 @@
<member name="toggle_mode" type="bool" setter="set_toggle_mode" getter="is_toggle_mode" overrides="BaseButton" default="true" />
</members>
<theme_items>
<theme_item name="font_color" data_type="color" type="Color" default="Color(0.88, 0.88, 0.88, 1)">
<theme_item name="font_color" data_type="color" type="Color" default="Color(0.875, 0.875, 0.875, 1)">
The [CheckButton] text's font color.
</theme_item>
<theme_item name="font_disabled_color" data_type="color" type="Color" default="Color(0.9, 0.9, 0.9, 0.2)">
<theme_item name="font_disabled_color" data_type="color" type="Color" default="Color(0.875, 0.875, 0.875, 0.5)">
The [CheckButton] text's font color when it's disabled.
</theme_item>
<theme_item name="font_focus_color" data_type="color" type="Color" default="Color(0.94, 0.94, 0.94, 1)">
<theme_item name="font_focus_color" data_type="color" type="Color" default="Color(0.95, 0.95, 0.95, 1)">
The [CheckButton] text's font color when it's focused. Only replaces the normal text color of the button. Disabled, hovered, and pressed states take precedence over this color.
</theme_item>
<theme_item name="font_hover_color" data_type="color" type="Color" default="Color(0.94, 0.94, 0.94, 1)">
<theme_item name="font_hover_color" data_type="color" type="Color" default="Color(0.95, 0.95, 0.95, 1)">
The [CheckButton] text's font color when it's hovered.
</theme_item>
<theme_item name="font_hover_pressed_color" data_type="color" type="Color" default="Color(1, 1, 1, 1)">
Expand Down
8 changes: 4 additions & 4 deletions doc/classes/CodeEdit.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -574,7 +574,7 @@
<theme_item name="caret_background_color" data_type="color" type="Color" default="Color(0, 0, 0, 1)">
[Color] of the text behind the caret when block caret is enabled.
</theme_item>
<theme_item name="caret_color" data_type="color" type="Color" default="Color(0.88, 0.88, 0.88, 1)">
<theme_item name="caret_color" data_type="color" type="Color" default="Color(0.875, 0.875, 0.875, 1)">
[Color] of the caret.
</theme_item>
<theme_item name="code_folding_color" data_type="color" type="Color" default="Color(0.8, 0.8, 0.8, 0.8)">
Expand All @@ -601,13 +601,13 @@
<theme_item name="executing_line_color" data_type="color" type="Color" default="Color(0.98, 0.89, 0.27, 1)">
[Color] of the executing icon for executing lines.
</theme_item>
<theme_item name="font_color" data_type="color" type="Color" default="Color(0.88, 0.88, 0.88, 1)">
<theme_item name="font_color" data_type="color" type="Color" default="Color(0.875, 0.875, 0.875, 1)">
Sets the font [Color].
</theme_item>
<theme_item name="font_outline_color" data_type="color" type="Color" default="Color(1, 1, 1, 1)">
The tint of text outline of the [CodeEdit].
</theme_item>
<theme_item name="font_readonly_color" data_type="color" type="Color" default="Color(0.88, 0.88, 0.88, 0.5)">
<theme_item name="font_readonly_color" data_type="color" type="Color" default="Color(0.875, 0.875, 0.875, 0.5)">
Sets the font [Color] when [member TextEdit.editable] is disabled.
</theme_item>
<theme_item name="font_selected_color" data_type="color" type="Color" default="Color(0, 0, 0, 1)">
Expand All @@ -625,7 +625,7 @@
<theme_item name="search_result_color" data_type="color" type="Color" default="Color(0.3, 0.3, 0.3, 1)">
[Color] behind the text that matches the search query.
</theme_item>
<theme_item name="selection_color" data_type="color" type="Color" default="Color(0.49, 0.49, 0.49, 1)">
<theme_item name="selection_color" data_type="color" type="Color" default="Color(0.5, 0.5, 0.5, 1)">
Sets the highlight [Color] of text selections.
</theme_item>
<theme_item name="word_highlighted_color" data_type="color" type="Color" default="Color(0.8, 0.9, 0.9, 0.15)">
Expand Down
18 changes: 7 additions & 11 deletions doc/classes/GraphNode.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -292,25 +292,25 @@
</constant>
</constants>
<theme_items>
<theme_item name="close_color" data_type="color" type="Color" default="Color(0, 0, 0, 1)">
<theme_item name="close_color" data_type="color" type="Color" default="Color(0.875, 0.875, 0.875, 1)">
The color modulation applied to the close button icon.
</theme_item>
<theme_item name="resizer_color" data_type="color" type="Color" default="Color(0, 0, 0, 1)">
<theme_item name="resizer_color" data_type="color" type="Color" default="Color(0.875, 0.875, 0.875, 1)">
The color modulation applied to the resizer icon.
</theme_item>
<theme_item name="title_color" data_type="color" type="Color" default="Color(0, 0, 0, 1)">
<theme_item name="title_color" data_type="color" type="Color" default="Color(0.875, 0.875, 0.875, 1)">
Color of the title text.
</theme_item>
<theme_item name="close_offset" data_type="constant" type="int" default="18">
<theme_item name="close_offset" data_type="constant" type="int" default="22">
The vertical offset of the close button.
</theme_item>
<theme_item name="port_offset" data_type="constant" type="int" default="3">
<theme_item name="port_offset" data_type="constant" type="int" default="0">
Horizontal offset for the ports.
</theme_item>
<theme_item name="separation" data_type="constant" type="int" default="1">
<theme_item name="separation" data_type="constant" type="int" default="2">
The vertical distance between ports.
</theme_item>
<theme_item name="title_offset" data_type="constant" type="int" default="20">
<theme_item name="title_offset" data_type="constant" type="int" default="26">
Vertical offset of the title text.
</theme_item>
<theme_item name="title_font" data_type="font" type="Font">
Expand All @@ -334,10 +334,6 @@
<theme_item name="commentfocus" data_type="style" type="StyleBox">
The [StyleBox] used when [member comment] is enabled and the [GraphNode] is focused.
</theme_item>
<theme_item name="defaultfocus" data_type="style" type="StyleBox">
</theme_item>
<theme_item name="defaultframe" data_type="style" type="StyleBox">
</theme_item>
<theme_item name="frame" data_type="style" type="StyleBox">
The default background for [GraphNode].
</theme_item>
Expand Down
2 changes: 0 additions & 2 deletions doc/classes/HSplitContainer.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,5 @@
<theme_item name="grabber" data_type="icon" type="Texture2D">
The icon used for the grabber drawn in the middle area.
</theme_item>
<theme_item name="bg" data_type="style" type="StyleBox">
</theme_item>
</theme_items>
</class>
2 changes: 1 addition & 1 deletion doc/classes/ItemList.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -463,7 +463,7 @@
</constant>
</constants>
<theme_items>
<theme_item name="font_color" data_type="color" type="Color" default="Color(0.63, 0.63, 0.63, 1)">
<theme_item name="font_color" data_type="color" type="Color" default="Color(0.65, 0.65, 0.65, 1)">
Default text [Color] of the item.
</theme_item>
<theme_item name="font_outline_color" data_type="color" type="Color" default="Color(1, 1, 1, 1)">
Expand Down
12 changes: 6 additions & 6 deletions doc/classes/LineEdit.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -382,28 +382,28 @@
</constant>
</constants>
<theme_items>
<theme_item name="caret_color" data_type="color" type="Color" default="Color(0.94, 0.94, 0.94, 1)">
<theme_item name="caret_color" data_type="color" type="Color" default="Color(0.95, 0.95, 0.95, 1)">
Color of the [LineEdit]'s caret (text cursor). This can be set to a fully transparent color to hide the caret entirely.
</theme_item>
<theme_item name="clear_button_color" data_type="color" type="Color" default="Color(0.88, 0.88, 0.88, 1)">
<theme_item name="clear_button_color" data_type="color" type="Color" default="Color(0.875, 0.875, 0.875, 1)">
Color used as default tint for the clear button.
</theme_item>
<theme_item name="clear_button_color_pressed" data_type="color" type="Color" default="Color(1, 1, 1, 1)">
Color used for the clear button when it's pressed.
</theme_item>
<theme_item name="font_color" data_type="color" type="Color" default="Color(0.88, 0.88, 0.88, 1)">
<theme_item name="font_color" data_type="color" type="Color" default="Color(0.875, 0.875, 0.875, 1)">
Default font color.
</theme_item>
<theme_item name="font_outline_color" data_type="color" type="Color" default="Color(1, 1, 1, 1)">
The tint of text outline of the [LineEdit].
</theme_item>
<theme_item name="font_selected_color" data_type="color" type="Color" default="Color(0, 0, 0, 1)">
<theme_item name="font_selected_color" data_type="color" type="Color" default="Color(1, 1, 1, 1)">
Font color for selected text (inside the selection rectangle).
</theme_item>
<theme_item name="font_uneditable_color" data_type="color" type="Color" default="Color(0.88, 0.88, 0.88, 0.5)">
<theme_item name="font_uneditable_color" data_type="color" type="Color" default="Color(0.875, 0.875, 0.875, 0.5)">
Font color when editing is disabled.
</theme_item>
<theme_item name="selection_color" data_type="color" type="Color" default="Color(0.49, 0.49, 0.49, 1)">
<theme_item name="selection_color" data_type="color" type="Color" default="Color(0.5, 0.5, 0.5, 1)">
Color of the selection rectangle.
</theme_item>
<theme_item name="caret_width" data_type="constant" type="int" default="1">
Expand Down
6 changes: 3 additions & 3 deletions doc/classes/LinkButton.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,13 +66,13 @@
</constant>
</constants>
<theme_items>
<theme_item name="font_color" data_type="color" type="Color" default="Color(0.88, 0.88, 0.88, 1)">
<theme_item name="font_color" data_type="color" type="Color" default="Color(0.875, 0.875, 0.875, 1)">
Default text [Color] of the [LinkButton].
</theme_item>
<theme_item name="font_focus_color" data_type="color" type="Color" default="Color(0.94, 0.94, 0.94, 1)">
<theme_item name="font_focus_color" data_type="color" type="Color" default="Color(0.95, 0.95, 0.95, 1)">
Text [Color] used when the [LinkButton] is focused. Only replaces the normal text color of the button. Disabled, hovered, and pressed states take precedence over this color.
</theme_item>
<theme_item name="font_hover_color" data_type="color" type="Color" default="Color(0.94, 0.94, 0.94, 1)">
<theme_item name="font_hover_color" data_type="color" type="Color" default="Color(0.95, 0.95, 0.95, 1)">
Text [Color] used when the [LinkButton] is being hovered.
</theme_item>
<theme_item name="font_outline_color" data_type="color" type="Color" default="Color(1, 1, 1, 1)">
Expand Down
6 changes: 3 additions & 3 deletions doc/classes/MenuButton.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,16 +46,16 @@
</signal>
</signals>
<theme_items>
<theme_item name="font_color" data_type="color" type="Color" default="Color(0.88, 0.88, 0.88, 1)">
<theme_item name="font_color" data_type="color" type="Color" default="Color(0.875, 0.875, 0.875, 1)">
Default text [Color] of the [MenuButton].
</theme_item>
<theme_item name="font_disabled_color" data_type="color" type="Color" default="Color(1, 1, 1, 0.3)">
Text [Color] used when the [MenuButton] is disabled.
</theme_item>
<theme_item name="font_focus_color" data_type="color" type="Color" default="Color(0.94, 0.94, 0.94, 1)">
<theme_item name="font_focus_color" data_type="color" type="Color" default="Color(0.95, 0.95, 0.95, 1)">
Text [Color] used when the [MenuButton] is focused. Only replaces the normal text color of the button. Disabled, hovered, and pressed states take precedence over this color.
</theme_item>
<theme_item name="font_hover_color" data_type="color" type="Color" default="Color(0.94, 0.94, 0.94, 1)">
<theme_item name="font_hover_color" data_type="color" type="Color" default="Color(0.95, 0.95, 0.95, 1)">
Text [Color] used when the [MenuButton] is being hovered.
</theme_item>
<theme_item name="font_outline_color" data_type="color" type="Color" default="Color(1, 1, 1, 1)">
Expand Down
10 changes: 5 additions & 5 deletions doc/classes/OptionButton.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -182,16 +182,16 @@
</signal>
</signals>
<theme_items>
<theme_item name="font_color" data_type="color" type="Color" default="Color(0.88, 0.88, 0.88, 1)">
<theme_item name="font_color" data_type="color" type="Color" default="Color(0.875, 0.875, 0.875, 1)">
Default text [Color] of the [OptionButton].
</theme_item>
<theme_item name="font_disabled_color" data_type="color" type="Color" default="Color(0.9, 0.9, 0.9, 0.2)">
<theme_item name="font_disabled_color" data_type="color" type="Color" default="Color(0.875, 0.875, 0.875, 0.5)">
Text [Color] used when the [OptionButton] is disabled.
</theme_item>
<theme_item name="font_focus_color" data_type="color" type="Color" default="Color(0.94, 0.94, 0.94, 1)">
<theme_item name="font_focus_color" data_type="color" type="Color" default="Color(0.95, 0.95, 0.95, 1)">
Text [Color] used when the [OptionButton] is focused. Only replaces the normal text color of the button. Disabled, hovered, and pressed states take precedence over this color.
</theme_item>
<theme_item name="font_hover_color" data_type="color" type="Color" default="Color(0.94, 0.94, 0.94, 1)">
<theme_item name="font_hover_color" data_type="color" type="Color" default="Color(0.95, 0.95, 0.95, 1)">
Text [Color] used when the [OptionButton] is being hovered.
</theme_item>
<theme_item name="font_outline_color" data_type="color" type="Color" default="Color(1, 1, 1, 1)">
Expand All @@ -200,7 +200,7 @@
<theme_item name="font_pressed_color" data_type="color" type="Color" default="Color(1, 1, 1, 1)">
Text [Color] used when the [OptionButton] is being pressed.
</theme_item>
<theme_item name="arrow_margin" data_type="constant" type="int" default="2">
<theme_item name="arrow_margin" data_type="constant" type="int" default="4">
The horizontal space between the arrow icon and the right edge of the button.
</theme_item>
<theme_item name="hseparation" data_type="constant" type="int" default="2">
Expand Down
6 changes: 3 additions & 3 deletions doc/classes/PopupMenu.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -538,19 +538,19 @@
<theme_item name="font_accelerator_color" data_type="color" type="Color" default="Color(0.7, 0.7, 0.7, 0.8)">
The text [Color] used for shortcuts and accelerators that show next to the menu item name when defined. See [method get_item_accelerator] for more info on accelerators.
</theme_item>
<theme_item name="font_color" data_type="color" type="Color" default="Color(0.88, 0.88, 0.88, 1)">
<theme_item name="font_color" data_type="color" type="Color" default="Color(0.875, 0.875, 0.875, 1)">
The default text [Color] for menu items' names.
</theme_item>
<theme_item name="font_disabled_color" data_type="color" type="Color" default="Color(0.4, 0.4, 0.4, 0.8)">
[Color] used for disabled menu items' text.
</theme_item>
<theme_item name="font_hover_color" data_type="color" type="Color" default="Color(0.88, 0.88, 0.88, 1)">
<theme_item name="font_hover_color" data_type="color" type="Color" default="Color(0.875, 0.875, 0.875, 1)">
[Color] used for the hovered text.
</theme_item>
<theme_item name="font_outline_color" data_type="color" type="Color" default="Color(1, 1, 1, 1)">
The tint of text outline of the menu item.
</theme_item>
<theme_item name="font_separator_color" data_type="color" type="Color" default="Color(0.88, 0.88, 0.88, 1)">
<theme_item name="font_separator_color" data_type="color" type="Color" default="Color(0.875, 0.875, 0.875, 1)">
[Color] used for labeled separators' text. See [method add_separator].
</theme_item>
<theme_item name="hseparation" data_type="constant" type="int" default="4">
Expand Down
2 changes: 1 addition & 1 deletion doc/classes/ProgressBar.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
<member name="step" type="float" setter="set_step" getter="get_step" overrides="Range" default="0.01" />
</members>
<theme_items>
<theme_item name="font_color" data_type="color" type="Color" default="Color(0.94, 0.94, 0.94, 1)">
<theme_item name="font_color" data_type="color" type="Color" default="Color(0.95, 0.95, 0.95, 1)">
The color of the text.
</theme_item>
<theme_item name="font_outline_color" data_type="color" type="Color" default="Color(1, 1, 1, 1)">
Expand Down
3 changes: 1 addition & 2 deletions doc/classes/ProjectSettings.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -562,8 +562,7 @@
<member name="gui/theme/custom_font" type="String" setter="" getter="" default="&quot;&quot;">
Path to a custom [Font] resource to use as default for all GUI elements of the project.
</member>
<member name="gui/theme/use_hidpi" type="bool" setter="" getter="" default="false">
If [code]true[/code], makes sure the theme used works with HiDPI.
<member name="gui/theme/default_theme_scale" type="float" setter="" getter="" default="1.0">
</member>
<member name="gui/timers/incremental_search_max_interval_msec" type="int" setter="" getter="" default="2000">
Timer setting for incremental search in [Tree], [ItemList], etc. controls (in milliseconds).
Expand Down
6 changes: 3 additions & 3 deletions doc/classes/TabBar.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -282,16 +282,16 @@
</constant>
</constants>
<theme_items>
<theme_item name="font_disabled_color" data_type="color" type="Color" default="Color(0.9, 0.9, 0.9, 0.2)">
<theme_item name="font_disabled_color" data_type="color" type="Color" default="Color(0.875, 0.875, 0.875, 0.5)">
Font color of disabled tabs.
</theme_item>
<theme_item name="font_outline_color" data_type="color" type="Color" default="Color(1, 1, 1, 1)">
The tint of text outline of the tab name.
</theme_item>
<theme_item name="font_selected_color" data_type="color" type="Color" default="Color(0.94, 0.94, 0.94, 1)">
<theme_item name="font_selected_color" data_type="color" type="Color" default="Color(0.95, 0.95, 0.95, 1)">
Font color of the currently selected tab.
</theme_item>
<theme_item name="font_unselected_color" data_type="color" type="Color" default="Color(0.69, 0.69, 0.69, 1)">
<theme_item name="font_unselected_color" data_type="color" type="Color" default="Color(0.7, 0.7, 0.7, 1)">
Font color of the other, unselected tabs.
</theme_item>
<theme_item name="hseparation" data_type="constant" type="int" default="4">
Expand Down
Loading

0 comments on commit 84a69d7

Please sign in to comment.