Color Themes Extensions
Description
Color Themes Extensions
Remarks
- Difficulties in determine where textPrimaryColor and textSecondaryColor goes;
Needed Colors
-Add Menu Entry Color-
- Fixed XE-796: Customizable "Add" menu entry from the Color Theme Wizard
- Problem XSCOLIBRI-221
- background-color for .actionmenu .tmCreate (currently #4D9244)
Selected-Highlight Color
Besided $theme.highlightColor we would need a $theme.selectedColor that can be the background of a selected value.
This would be useful in:
- Rights: mark right that are changed this session and that will be applied after Save;
- Hightlight applied filters in livetable: mark what filter is currently applied
Light Background Color
User profile bg, Watchlist, Import UI, etc.
- #F7F7F7
-Actions/Notification Colors-
- #336699 Info
- #008000 Success
- #D6AE00 Warning
- #CC3333 Error
- #336699 Info
- #008000 Success
- #D6AE00 Warning
- #CC3333 Error
-A. History Compare Versions-
- Fixed XE-797: Add notification colors: info, success, warning, error to ColorTheme variables
- Obs. Could use an opacity property for the red color
skin/skins/colibri/colibri.css
.diffremoveword ; .diffaddword
- #CA9A9B
- #287F00
-B. Add Actions (Original Version)-
xwiki/resources/js/xwiki/viewers/attachments.css
.add-file-input
- #287F00
-C. Boxes-
skin/skins/colibri/colibri.css
.xwikirenderingerror
.errormessage, .warningmessage, .infomessage, .plainmessage
- Error: #E14726
- Warning: #D5A13D
- Info: #336699
-D. Notification-
xwiki/resources/uicomponents/widgets/notification.css
- Info: #226688
- Error: #AA0000
- Warning: #FFDD88
- Progress: #333333
- Done: #116600
-E. Groups-
xwiki\resources\js\xwiki\usersandgroups\usersandgroups.css
#errMsg
- #D70
Other
F. Code Macro
skin/skins/colibri/colibri.css
Syntax 1.0 .java-keyword, .java-object, .xml-tag, .sql-keyword, .java-quote
http://code.xwiki.org/xwiki/bin/view/Macros/CodeMacro20
var x: Int = 1;
var s: String = "abcdefg";
//also valid
var x: = 1;
var s: = "abcdefg";
//also valid
var x: = 1
...
font-size: 13px;
font-family: Arial, 'Times New Roman', sans-serif;
width: 900px;
margin: 0 auto;
color: #303030;
}
<doc>
<tag argument="value">Content</tag>
return (elem.value || "").replace(/\r/g, "");
}
return undefined;
}
if ( typeof value === "number" )
value += '';
return this.each(function(){
if ( this.nodeType != 1 )
return;
font-size: 13px;
font-family: Arial, 'Times New Roman', sans-serif;
width: 900px;
margin: 0 auto;
color: #303030;
}
G. Panel Wizard Maquette
skin/skins/colibri/colibri.css
H. WYSIWYG Selection
xwiki/resources/js/xwiki/wysiwyg/xwe/stylesheets/Wysiwyg.css
Colors to add to the ColorThemeClass (DRAFT)
Add Menu Entry Color (JIRA: XSCOLIBRI-221)
panelLinkColor (JIRA:XSCOLIBRI-159)
backgroundAlternativeColor TODO: find a better name (should this one be used for message boxes too?)
textColorAdd : "Add" links, added content in the version diff
textColorDelete : "Delete" links, deleted content in the version diff
notificationTextColor
notificationErrorBackgroundColor
notificationWarningBackgroundColor
notificationInfoBackgroundColor
notificationDoneBackgroundColor
notificationProgressBackgroundColor
messageErrorTextColor (for message boxes and other error messages in custom apps)
messageWarningTextColor
messageInfoTextColor
messageOKTextColor
Wysiwyg selection should use highlightColor.
panelLinkColor - agree
- we have primary/secondary naming. We have backgroundSecondaryColor, but miss backgroundPrimaryColor, though this naming is not very explicit either.
actionAddColor , actionDeleteColor
if we have only a solo notification's text color, than the Warning Color must be darker, so the white is seen correctly.
I would like to have the same color on the add|delete actions as on the done|error notifications, and done|ok messages.
Var 1:
infoTextColor | infoBackgroundColor
successfulTextColor | successfulBackgroundColor
progressTextColor | progressBackgroundColor
warningTextColor | warningBackgroundColor
errorTextColor | errorBackgroundColor
Var 2:
infoColor, successfulColor, progressColor, warningColor, errorColor
neutralColor
- Info
- Successful
- Progress
- Warning
- Error
- Info
- Successful
- Progress
- Warning
- Error
- Info
- Successful
- Progress
- Warning
- Error
Conclusion
- $theme.notificationInfoColor
- $theme.notificationSuccessColor
- $theme.notificationWarningColor
- $theme.notificationErrorColor
- #336699 Info
- #008000 Success
- #D6AE00 Warning
- #CC3333 Error
- #336699 Info
- #008000 Success
- #D6AE00 Warning
- #CC3333 Error