How to include branding in Angular 16 with WebSDK

[David.Richter]

I migrate a old Angular Cumulocity App from Angular 12 up to Angular 16. After many refactoring the app works mostly like before. Now I stuck with the styling. The app looks different from before.

What problems I have?

For example lets look at the footer. This is how the footer looks before:

Now the footer looks like this

When I try to check where the old color comes from and where the new color comes from I see this for the old version:

It looks like the color comes from the branding.

In the new file the red color comes from somewhere else

When I deactivate the first section the second blue colored section get activated with the same red color. When I also deactivate this the text become blue. I don’t know where this _scaffolding.less comes from where it’s its styling from.

Branding

We had defined a branding in our old app. This includes images and many less files.

src/
├── app/
└── assets/
    └── branding/
        ├── img/
        ├── branding.less
        ├── customStyle.less
        ├── customerName-color.less
        ├── material.min.less
        └── variables.less

The branding.less looks like this

@import "@c8y/style/extend.less";
@import "./customerName-color";
@import "./material.min.less";
@import "./variables.less";
@import "./customStyle.less";

and is includes in the angular.json
projects → cockpit-app → architect → build → options → "styles": ["src/styles.less", "src/assets/branding/branding.less"]

customerName-color.less
Defines some color varibales from the customers branding.

material.min.less
Styles some of the material components. It was created with this tool https://materialtheme.arcsine.dev/
I’m not sure if everything in this file still will work after migration to Angular 15 with the new material design components (MDC).

variables.less
This file seams to define some variables that should be used by the branding system!? It looks like this:

/* COLORS */
@brand-color: @customerName-red-button; // main color
@brand-primary: @brand-color;
@brand-complementary: #a8b3b5;
@brand-dark: #00f;
@brand-primary-light: lighten(@brand-primary, 20%);

...

@font-family-ration-display-book: "RationalDisplay-Book";
@font-family-base: @font-family-ration-display-book;
@headings-font-family: @font-family-ration-display-book;
@navigator-font-family: @font-family-ration-display-book;

It used variables from the customerName-color.less file.

customStyle.less
Set styling for many custom components that developed by us. Its also set styling for c8y-components like .c8y-ui-action-bar.

Additional information
We are on angular 16.2.0 with version 1019.21.1 of c8y. We use bootstrap components from ngx-components out of c8y. We use material components and we have our own components.

Do I need https://www.npmjs.com/package/@c8y/style for branding?
Where _scaffolding.less comes from?
Where to say my angular app to use this branding?

[David.Richter]

Additional to this topic:

Before we started the appliation with argument --app.brandingEntry="./branding/mybranding.less". In the description of how to upgrade to Angular 16 nothing talk about how to migrate the branding.

[Tristan_Bastian]

Hi @David.Richter,

you can specify the brandingEntry application option as part of the buildTime options in your cumulocity.config.ts file.

The branding process is described here: Styling by extending @c8y/style

A sample branding, setting a different primary color would look like this:

@import '~@c8y/style/main.less';

:root {
  --brand-primary: red;
}

You can find the available variables listed here: Codex

[David.Richter]

Ok this helps a little bit.
I add new our branding into the buildTime configuration in my cumulocity.config.ts and I can see that it try to use this settings.
First I add

:root {
  --brand-primary: blue;
}

Nothing get blue. Everything is still red.
When I check the applied styling I see this:

When I deactivated it my stuff get blue via my branding:

The next think I try was to add !important: --brand-primary: blue !important;
As I expect the blue takes effect. But this could not be the way to put everythere an !important. Then I try something else:

:root {
  --c8y-brand-primary: green;
}

And new all stuff is green. It look like --c8y-brand-primary is higher then --brand-primary.

Why you import main.less and not extend.less? What is the difference between @c8y/style/main.less and @c8y/style/extend.less? When I have to use what?
Why is --c8y-brand-primary working and why not --brand-primary?

[Tristan_Bastian]

My guess would be that you have some sort of branding applied to your tenant.
You can check the branding that is currently applied to your tenant via: https://<tenantDomain>/apps/public/public-options/options.json
This is probably containing the brand-primary variable somewhere and that one is set to #D73237.

In case you don’t want the tenants branding to be applied to your application you can remove the dynamicOptionsUrl in your cumulocity.config.ts file.

The c8y- prefixed variables are used internally, but should not be used by you.

[David.Richter]

Thank for your answer. I removed dynamicOptionsUrl. Now I can define all the stylings which take a while to let it look like before.
I found some variables that not in the list from Codex. I try for example to change the hover color of links. There is one option in the Codex which is called --link-hover-color and should effect --c8y-link-hover-color. But my links not change color like I setup. When I check which color links have I found this:

When I activate hover it look like this

The element I should style is --c8y-root-component-color-link-hover instead of --c8y-link-hover-color. For this there is no equivalent tag.