A Colourful Semantic Adventure

Recently I was having one of those days.

You know … one of those days.

I was having a problem that I thought should be really, really easy to solve but good ol’ google wasn’t coming up with the goods.

It all started when my client was very wisely wanting to use semantic colour names from SAPUI5.

The colour palettes are very well thought out and the intent was to use the colour names instead of the hex values.

I trust that you know why this is a good idea. In case you don’t there is a very subtle hint on that colour names page.

Use Names – Do not use HEX values!

These names are like variables and if your user should change theme then the colour will change with the theme and everything will look consistent.

Yes … but.

These names are lovely and I get the reason for using it but how to get from  sapUiChartPaletteQualitativeHue1 -> #5cbae6.

The interesting part of this equation is that component that I was trying to apply the colour to, only accepted a string, which implied a standard HTML hex colour.

I started looking for references to colour in the UI5 api. Well actually I was searching for ‘color’ because … anyway … inches and cm and m/d/y … you get my meaning.

I found ValueCSSColor which I thought by the way it was describing itself would do the magic I was looking for but no. I looked into the two classes mentioned  sap.m.ValueColor which is just an enum of semantic colours and sap.ui.core.CSSColor which is similar to ValueColor but seemed to excluded ‘Less’ parameters.

This was rattling around in my brain and not really landing on anything conclusive but a hunt through the source code felt like a fun way to attack the problem.

I really wanted to crack this.

I really didn’t want to go back to the client and tell them that this was impossible and they needed to supply us with the hexadecimal codes.

Like all good UI5 developers I have the whole source code on my computer and so a little grepping was in order.

I started three searches for one of the colour names just to see which one would complete first.

1. A search from windows explorer
2. A search in a folder with Sublime Text
3. A grep search with Git Bash which lives on a linux like shell.

Windows explorer told me nothing.

Both grep and sublime came up with the goods but the sublime search was more useful as I could more quickly delve into the file itself.

Unfortunately this still didn’t point me to the money shot.

I could see there was a library parameters file.

\resources\sap\f\themes\base\library-parameters.json

I could see that all the css files had a reference to the colour names also.

But how to decode that css name to a hex colour to use with my icon?

I could see that the colour pages were relating mostly on the theme of charts so I looked up information and examples on the VizFrame only to find a few examples of modifications of charts using HEX codes.

No!

This is not what I wanted! I wanted to find the examples clearly using the semamtic colour names and decoding them into hex codes.

Still no cigar.

So I rubber-ducked with a friend online and as it turns out there is a perfectly simple solution to this.

As it is related to the theme and it is a parameter I tried the google vector “ui5 less parameters” and WALLAR*! (as they say in France)

This page politely told me that I could use:

sap.ui.core.theming.Parameters.get()

And I would be home and hosed.

I can pass it any less parameter and get back the value. Trying this out in the JavaScript console leads to :

sap.ui.core.theming.Parameters.get('sapUiChartPaletteQualitativeHue1')
"#5899da"

Problem solved.

As with most problems getting the question right leads to the most useful answer.

* Yes I know the French say “voilà“. Don’t @ me.