Color Themes Extensions

Last modified by Vincent Massol on 2024/02/26 17:54

 XWiki
 Design
 Completed

Description

Color Themes Extensions

Remarks

  • Difficulties in determine where textPrimaryColor and textSecondaryColor goes;

Needed Colors

 -Add Menu Entry Color- 

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- 

skin/skins/colibri/colibri.css
.diffremoveword ; .diffaddword
history.png

  • #CA9A9B
  • #287F00

 -B. Add Actions (Original Version)- 

xwiki/resources/js/xwiki/viewers/attachments.css
.add-file-input
attachments.png

  • #287F00

 -C. Boxes- 

skin/skins/colibri/colibri.css
.xwikirenderingerror
.errormessage, .warningmessage, .infomessage, .plainmessage
infoBox.png

  • Error: #E14726
  • Warning: #D5A13D
  • Info: #336699

 -D. Notification- 

xwiki/resources/uicomponents/widgets/notification.css
notifications.png

  • Info: #226688
  • Error: #AA0000
  • Warning: #FFDD88
  • Progress: #333333
  • Done: #116600

 -E. Groups- 

xwiki\resources\js\xwiki\usersandgroups\usersandgroups.css
#errMsg
group.png

  • #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

//valid
var x: Int = 1;
var s: String = "abcdefg";

//also valid
var x: = 1;
var s: = "abcdefg";

//also valid
var x: = 1
...
body {
    font-size: 13px;
    font-family: Arial, 'Times New Roman', sans-serif;
    width: 900px;
    margin: 0 auto;
    color: #303030;
   }
<?xml version="1.0"?>
<doc>
<tag argument="value">Content</tag>
 // Everything else, we just grab the value
   return (elem.value || "").replace(/\r/g, "");

   }

  return undefined;
  }

 if ( typeof value === "number" )
   value += '';

 return this.each(function(){
  if ( this.nodeType != 1 )
   return;
body {
    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

panelMachette.png

H. WYSIWYG Selection

xwiki/resources/js/xwiki/wysiwyg/xwe/stylesheets/Wysiwyg.css

selectMacro.png

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

 

Tags:
    

Get Connected