The goal here is to make the meaning of button colors in Tiki more intuitive and consistent, at least in the Bootstrap Default theme, as a baseline. Of course every theme has its own color palette and button colors vary from the default.
In Bootstrap 4, which is integrated into Tiki 19 and newer, some button class names and default colors have changed from Bootstrap 3. (See https://getbootstrap.com/docs/4.3/components/buttons/ .) The meanings conveyed by button colors may not be as clear now as they were in Bootstrap 3, when the default button color was essentially neutral and colors were used for special meaning and, even with Tiki and Bootstrap 3, there wasn't a clear pattern of button color use.
For this reason, the button classes are being organized in the .tpl files, etc. and will be in the HTML and they will be most apparent in the Default Bootstrap theme. Other themes, of course, can style buttons as they please but the hope is that the organization of button colors makes sense and will benefit themes and users even if the themes' palettes vary from the Bootstrap default.
One suggestion is that sites could assign an admin theme that shows the button colors most clearly, and another site theme with perhaps less obvious colors that are toned down from the default ones.
Button purpose category | CSS class, and color in Bootstrap default theme | Examples |
Make a significant non-destructive change | btn-primary (royal blue -#007bff) | Save, Apply, Rename, Select, Attach |
Confirmation for non-destructive change | btn-success (green) | Anti-CSRF confirmation |
Make a destructive change | btn-danger (red) | Delete, Remove |
Confirmation for destructive change | btn-warning (yellow) | Are you sure? |
Display information Including buttons that navigate to another page to show content. | btn-info (turquoise blue - #17a2b8) | History, Source, Preview, Find |
Make an insignificant change Including buttons that show/hide content without a page change. | btn-secondary ("cyber grape") | Tabs/No tabs, Sort, Filter, Files, Comments, More |
Dev mailing list discussion starts here: https://sourceforge.net/p/tikiwiki/mailman/message/36346433/
btn-secondary
"cyber grape" when in default Bootstrap4 it is dark grey (#6c757d) ?
btn-secondary
. A rationale can be seen for btn-danger
being red (in our cultural context anyway), but there isn't a particular rationale for btn-secondary
being dark grey. IIRC, the button's color change in Tiki was to give it a color like the other buttons have and not a gray shade. Maybe the change was also to give it some relationship to btn-primary
and its color, which is blue by default, in the same way there is a color relationship between btn-warning
and btn-danger
.