Default Chart label styles are overriden by typography styles from library

[hanastasov]

Styles from typography break the chart label styles:

• igniteui-angular version: 13.0.0

• 1) Go to https://stackblitz.com/edit/angular-hqqn9j-dz4flv?file=src/styles.scss

See how label are bigger than expected and top edge of chart is cut off.

[hanastasov]

It is very strange, when we stry setting this in chart template:

    xAxisLabelTextStyle="normal 400 14px inherit, sand-serif"
    yAxisLabelTextStyle="normal 400 14px 'Titillium Web'"

For some reason, the definiton with inherit makes the the chart disrecpect the size, maybe the weight too.

[damyanpetev]

Bonus: seems like the inherit portion makes the font shortcut invalid - pretty easy to check against a paragraph for example: https://stackblitz.com/edit/angular-hqqn9j-16qzvm?file=src%2Fapp%2Fcolumn-chart-multiple-sources%2Fcategory-chart-column-chart-multiple-sources.component.html

Which is why the size (and anything else for that matter) is ignored and by Graham's estimation the last used font (likely some title) is used, explaining the extra large axis labels.

Edit: Just noticed the numbers as well as what they stand for, 2.125rem will make the labels kinda huge if it did work

[sdimchevski]

For the Category charts what we have in the UI kits is this:

Material: Titles: Titillium Web (Semibold,) 20px Labels: Titillium Web (Regular), 14px Axis Titles: Titillium Web (Regular), 14px

Indigo: Titles: Nunito Sans (Semibold), 20px Labels: Nunito Sans (Regular), 14px Axis Titles: Nunito Sans (Regular), 14px

Fluent: Titles: Open Sans (Regular), 20px Labels: Open Sans (Regular), 14px Axis Titles: Open Sans (Regular), 14px

Bootstrap: Titles: Roboto (Medium), 16px Labels: Roboto (Regular), 14px Axis Titles: Roboto (Regular), 14px

[damyanpetev]

For the Category charts what we have in the UI kits is this:

Material: Titles: Titillium Web (Semibold,) 20px Labels: Titillium Web (Regular), 14px Axis Titles: Titillium Web (Regular), 14px

Indigo: Titles: Nunito Sans (Semibold), 20px Labels: Nunito Sans (Regular), 14px Axis Titles: Nunito Sans (Regular), 14px

Fluent: Titles: Open Sans (Regular), 20px Labels: Open Sans (Regular), 14px Axis Titles: Open Sans (Regular), 14px

Bootstrap: Titles: Roboto (Medium), 16px Labels: Roboto (Regular), 14px Axis Titles: Roboto (Regular), 14px

As far as I understood it, the chart titles are using the equivalent H6 typography, right? Just clarifying so the H6 styles can be reused in the theme just as they are in the designs, unless they should differ.

[SisIvanova]

It turns out that two of the values in the font shorthand are mandatory:

• font-size
• font-family

If either of these is not included, the entire declaration will be ignored. Also, font-family must be declared last of all values, otherwise, again, the entire declaration will be ignored.

https://css-tricks.com/almanac/properties/f/font/

[hanastasov]

A note for myself: after verifying this, check #17608

[damyanpetev]

It turns out that two of the values in the font shorthand are mandatory:

• font-size
• font-family

If either of these is not included, the entire declaration will be ignored.

Yup, and inherit is not a valid value for the font-family in the shorthand because it's a global value for everything and can't be distinguished as the family specifically or anything else ;)

[simeonoff]

@SisIvanova We have to add the font-weight property to the generated typography variables.

The value format is font-weight font-size font-family;