1
dev/gui colors
Tom Zander edited this page 2023-04-02 20:33:04 +00:00
The GUIs shipped by Flowee Pay today use a palette based approach to colors. Most new screens will simply reuse existing components and you don't have to worry about colors at all, for new components or custom pages this section will explain how we use colors.
Palette based
The main approach is one where a palette is used which ties names to specific colors. We have a light-theme palette and a dark-theme palette and components that use the palette will thus simply work.
Reference
- palette.window
- background of all things.
- palette.base
- background of text fields, popup-menus
- palette.alternateBase
- background of even rows in lists
- palette.light
- background of groupbox, odd rows, pages etc
- palette.dark
- contrast to the previous one
- palette.mid
- borders for groupbox, sliders, text-area
- palette.windowText
- Most text (labels etc)
- palette.text
- multiline textarea text color.
- palette.brightText
- popup menu text, less strong text
- palette.button
- buttons and groupbox borders and slider borders
- palette.buttonText
- just text for buttons
- palette.highlight
- mouseover on popup, slider thumb, outline of active textfield, selected-text background
- palette.highlightedText
- selected text
- Desktop is the only one that uses tooltips
- palette.toolTipBase
- tooltip background
- palette.toolTipText
- tooltip text and outline
- palette.shadow
- tooltip shadow
- palette.midlight
- shade of Flowee-green.
- palette.link
- unused
- palette.linkVisited
- unused
A reference and indeed useful place to work on palettes is provided below, it makes visible what a javascript file with colors doesn't:
