-
-
Notifications
You must be signed in to change notification settings - Fork 53
Style File
A Style file is a YAML file containing a known set of keys specifying the fonts, paths & colors being used to draw all the UI (Main GUI, Script Window & Test Bench ).
To enable skinning or themes to a certain extent, WARP uses these files. A template for this file has been provided in the 'Styles' folder.
The quickest way to start writing your own style file is to copy the template and edit that.
All the keys & sections being mentioned below are optional.
For any missing keys in the file, the tool will pick up the corresponding value from the inbuilt database.
You can make use of the include key to import additional entries from other files into the current style file as shown below.
include:
- <YAML file1>
- <YAML file2>
...This process is recursive, so you can keep a good hierarchy rather than 1 single bloated file for styles.
Currently, there is only 1 global key.
radius: 8radius - Border radius to be used for all controls.
This section specifies the fonts to use across the entire UI along with sizes. It is a map specified using the key font as shown below.
font:
family: Nova Flat
size: 9
sizeBig: 12
sizeSmall: 8
editFamily: Cambria
editSize: 10The editFamily and editSize are used for specifying the font used in Text Editor controls like the Script Editor or Output view.
The sizeSmall font is used in Patch List while sizeBig font is used for Message Box titles & Filter fields. Regular size fonts are used everywhere else.
This section specifies the paths used by various controls across the entire UI. As of now only image paths are being setup this way.
But it can be generalized in future. It is a map specified using the key paths as shown below.
paths:
browseBtn:
inactive: "Images/browse_i.png"
active: "Images/browse_a.png"
viewBtn:
inactive: "Images/viewfile_i.png"
active: "Images/viewfile_a.png"
clearBtn:
inactive: "Images/clear_i.png"
active: "Images/clear_a.png"
prevBtn:
inactive: "Images/prev_i.png"
active: "Images/prev_a.png"
nextBtn:
inactive: "Images/next_i.png"
active: "Images/next_a.png"
discordBtn:
inactive: "Images/discord_i.png"
active: "Images/discord_a.png"
donateBtn:
inactive: "Images/donate_i.png"
active: "Images/donate_a.png"
githubBtn:
inactive: "Images/github_i.png"
active: "Images/github_a.png"
settingsBtn:
inactive: "Images/settings_i.png"
active: "Images/settings_a.png"
infoBtn:
inactive: "Images/info_i.png"
active: "Images/info_a.png"
actDrawer:
inactive: "Images/actns_i.png"
active: "Images/actns_a.png"
extnDrawer:
inactive: "Images/extns_i.png"
active: "Images/extns_a.png"
sort:
on: "Images/ascend.png"
off: "Images/descend.png"
boldBtn:
on: "Images/bold_on.png"
off: "Images/bold_off.png"
italicBtn:
on: "Images/italic_on.png"
off: "Images/italic_off.png"
rexBtn:
on: "Images/rex_on.png"
off: "Images/rex_off.png"
csBtn:
on: "Images/cs_on.png"
off: "Images/cs_off.png"
switch:
on: "Images/on.png"
off: "Images/off.png"
rcmdTag:
inactive: "Images/rcmd_i.png"
selected: "Images/rcmd_s.png"
search:
indicator: "Images/search.png"
sizegrip:
indicator: "Images/grip.png"
msgHeader:
successBox: "Images/success_header.png"
queryBox: "Images/query_header.png"
warnBox: "Images/warn_header.png"
errBox: "Images/error_header.png"-
All the Image Buttons have 2 paths for it's
inactive& hovered/activestates respectively. -
Similarly all the Switches/Check Boxes have 2 paths for it's
off&onstates respectively. -
The
searchicon andsizegrip(used for the Input Dialogs ) both have just 1indicatorimage paths. -
Finally the
msgHeaderdescribes the header icon for all 4 types of message boxes available.
This section specifies the colors being used for various parts of each controls in the UI.
For every control there is an implicit color scheme (partly based on Material theme).
However, it is also possible to individually customize the colors for every control by using it's name.
A Color can be specified in one of 3 forms:
-
SVG color name for e.g.
lightsteelblue -
hexadecimal triplet or quadruplet i.e.
'#RRGGBB'OR'#AARRGGBB' -
array of components (R, G, B, A) for e.g.
[120, 255, 200, 100]
All the colors are specified by means of a map using the key colors as shown below.
#=============================================#
# Used globally in various sections of the UI #
#=============================================#
global:
background: '#FDFDFF'
overlay: '#80101010'
border: '#CED2E8'
primary: '#3F51AD'
secondary: '#673AB7'
accent: '#9C27B0'
highlight: white
#==========================#
# Used for Drop Down menus #
#==========================#
dropDown:
background: '#E0E8F2'
border: '#C8CFDF'
#===================================#
# Used for tabs/pages in Test Bench #
#===================================#
page:
background: '#F4F8FB'
border: '#C0D5E0'
#===============================#
# Used for Text Editor controls #
#===============================#
editor:
background: aliceblue
#===================================================================#
# Override for Quick Action Frames (looks better without the lines) #
#===================================================================#
actionFrame:
border: transparent
#=========================================================#
# Override for Demo Text in FontNamePanel & FontSizePanel #
#=========================================================#
demoText:
inactiveText: '#20B295'
activeText: '#20B295'
#==============================================================#
# Override for Index prompts in VectorPanel (for D_Vec* types) #
#==============================================================#
idxPrompt:
color: lightseagreen
#=============================================================#
# Used for the items in Patch List, Extension List & Exe List #
#=============================================================#
delegate:
text: '#3850A8'
groupText: lightseagreen
selectedText: white
background: '#E4EAF0'
selectedBG: lightseagreen
menuText: '#20B295'
#=============================#
# Used for Dialog Box Buttons #
#=============================#
dialog:
acceptor: lightseagreen
rejector: crimson
#=============================#
# Used for Message Box frames #
#=============================#
errBox:
border: '#E81E60'
warnBox:
border: '#EF8028'
successBox:
border: '#389FDF'
queryBox:
border: '#20B295'
aboutBox:
border: steelblue
settingsBox:
border: '#673AB7'
#====================================================#
# Used for pattern matches with Finder in Test Bench #
#====================================================#
matches:
background: darkgray
text: mintcream
currentBG: lightseagreen
currentText: white
#===========================================#
# Used for Test & Script Evaluation results #
#===========================================#
outputView:
success: darkgreen
info: '#007f7f'
error: '#dc143c'
warn: '#ff8c00'
patInfo: blue
extnInfo: blue
exeInfo: darkmagenta
patIgnored: magenta
extnOutput: magenta
userInterrupt: hotpink
#============================================#
# Used by Syntax Assistant for Script Editor #
#============================================#
syntax:
comment: gray
docComment: darkcyan
number: darkorange
string: darkgreen
escSequence: magenta
regexp: darkmagenta
operator: black
keyword: blue
globVal: mediumturquoise
member: mediumvioletred
invalid: red
Typically all the settings mentioned for Colors should be enough for a style file.
However, it is also possible to perform individual customizations for all the controls to a certain degree.
To do this, you need to get the Name of the control which you wish to modify and the available keys for it/them.
Finally you can add them to the color map.
One prime example is already shown above for actionFrame which overrides the border to make it disappear (this is the one used for all the 'Quick Actions').