[Hornbill Docs] Request for a supported list of colour styles in Wiki Markup ie. var(--primary-text)

[samwoo]

Good afternoon,

Since we cannot directly control font colour in the Intelligent Capture, the advice is always to use <span></span> in the Wiki Markup documentation but there is a limit to how we do this. In the past I've had need to add colour to text in the Intelligent Capture but unfortunately any styles we apply directly can have a negative effect with other colour schemes. (i.e. making text hard to read in Dark mode as an example, if using a dark blue font colour).

However with the knowledge and understanding I have about HTML, CSS and a tiny bit about bootstrap and other kinds of wrappers, is in Web Design, it is good practice to use variables where possible, which allows extensibility.

I had a look to see how Hornbill operated, and sure enough, in the CSS, there are variables being used to determine font colours. This means that the variable will always remain the same, regardless of what Colour Scheme is being applied - but it's the colour behind with that variable that's being changed accordingly.
 

A few examples in the Intelligent Capture:
Note that adding these in works with the current Hornbill implementation, when the colour scheme changes - this is no trick using the Developer Tools!

 

--primary-text

<span style="color: var(--primary-text)">____text here____</span>

• Light Theme
  
• Dark Theme
  
• High Contrast Theme
  

--blue 

<span style="var(--blue)">____text here____</span>

• Light Theme
  
• Dark Theme
  
• High Contrast Theme
  

--yellow

<span style="var(--yellow)">____text here____</span>

• Light Theme
  
• Dark Theme
  
• High Contrast Theme
  

As you can see there are a few examples, and there are more colours that I can see and these adapt according to the selected colour scheme.

 

So, I would like to request one or more of the following:

1. Add a list of Hornbill supported variable colours, showing what the text colours looks like for each colour scheme, to a page on docs.hornbill.com
    
   1. The supported variable colours must always be available to customers (unless a major rewrite is required to Hornbill) - with the option to allow customers to override the variable colours per colour scheme, but easily allow the variables to be set back to Hornbill's default variable colours.
       
2. Allow sites to specify their own colours per colour scheme.
    
   1. I know this goes a bit against Hornbill's ease of use and accessibility for all customers, however I have seen other ITSM/ESM tools (I searched about on Google) where they allow customers to apply their own CSS styling and there are quite a few. I'm not asking to allow us complete control (I agree we shouldn't have full control over the main Hornbill interface), but at least maybe allow us to define our own colours (per colour scheme) so we can use them in the Intelligent Captures, Employee Portal screens, Request Timelines... basically anywhere Wiki Markup is supported. This could be considered advanced functionality.

[Daniel Dekel]

Hi @samwoo and thank you for taking the time on writing the detailed explanation.

We internally use CSS variables, that was one of the big changes in the new UI we've introduced internally. This allows, as you can see, real time update when changing theme.

We are still working on using a more standard naming convention for the CSS Variables we use. Once we have these definite names we should be able to expose some of these publicly so you can use it in the wiki text.

Is probably not a good idea to use variables such as "yellow" or "blue"  because these will remain the same when changing theme. But more semantical names such as "primary" and "success" will make more sense. 

Regarding allowing customers to customize the variables, there had been some discussions about this, but is in very early stages and if this is agreed, I don't think we'll have something soon.

I'll keep you updated with our progress. 

Regards,

Daniel.

[samwoo]

Thanks @Daniel Dekel for taking the time to read my request and for providing updates on what's been going on internally around this.

[samwoo]

Just wanted to touch base to find out if this has made any progress by any chance?  Is there a list of variables we can start using now by any chance?

[Daniel Dekel]

Hi @samwoo,

I've just updated our wiki document to reflect the supported CSS Variables. I've called it Hornbill Color Variables
https://docs.hornbill.com/esp-fundamentals/reference-guides/hornbill-wiki-markup#strike-through-underline-and-font-colortype
This will adapt to the theme you use (dark/light). 
I hope it is enough for what you need. 

Regards,

Daniel.

[samwoo]

that's great @Daniel Dekel, thank you