fix(design system): font size inconsistencies with % and em units

[valentinogiardino]

Proposed Changes

• replace font-size in % per variables in .scss files
• replace font-size in em per variables in .scss files

Additional Info

This PR addresses inconsistencies in font sizes caused by the use of % and em values. It focuses exclusively on .scss files, ensuring that all font sizes are now defined using standard variables.

Font sizes within HTML tags will be handled in a separate ticket if necessary. However, this PR includes fixes for two inline font sizes to resolve an IQA report.

Font size variables

Variable	px	rem
font-size-xxxl	32	2
font-size-xxl	28	1.75
font-size-xl	24	1.5
font-size-lg	20	1.25
font-size-lmd	16	1
font-size-md	14	0.875
font-size-sm	12	0.75
font-size-xs	10	0.625

Regex Used

• Regex for %: font-size\s*:\s*\d*\.?\d+%
• Regex for em: font-size\s*:\s*\d*\.?\d+em

Table for % replacement

font-size (%)	Value base 14px	Value base 16px	Variable	Variable Size (px)	Variable Size (rem)
60	8.4	9.6	font-size-xs	10	0.625
77	10.78	12.32	font-size-xs	10	0.625
80	11.2	12.8	font-size-sm	12	0.75
85	11.9	13.6	font-size-sm	12	0.75
88	12.32	14.08	font-size-sm	12	0.75
90	12.6	14.4	font-size-sm	12	0.75
93	13.02	14.88	font-size-md	14	0.875
100	14	16	font-size-md	14	0.875
108	15.12	17.28	font-size-lmd	16	1
131	18.34	20.96	font-size-lg	20	1.25
138.5	19.39	22.16	font-size-lg	20	1.25
174	24.36	27.84	font-size-xl	24	1.5

Table for em replacement

em	Value 14	Value 16
0.7	9.8	11.2
0.8	11.2	12.8
0.916	12.824	14.656
1	14	16
1.1667	16.3338	18.6672
1.2	16.8	19.2
1.25	17.5	20
1.33	18.62	21.28
1.5	21	24
2	28	32
3	42	48
4	56	64
5	70	80

Considerations taken:

dot-edit-page-nav.component.scss

.edit-page-nav__item {
    align-items: center;
    color: $color-palette-gray-800;
    display: flex;
    flex-direction: column;
    font-size: $font-size-xs;
    height: $nav-size;
    justify-content: center;
    text-decoration: none;
    text-transform: uppercase;
    transition: background-color $basic-speed ease-in;

    dot-icon {
        margin-bottom: $spacing-1;
    }

    &:hover {
        background-color: $color-palette-gray-200;
    }

    & > .fa {
        font-size: 1.25em;
        margin-bottom: 8px;
    }
}

• .edit-page-nav__item font-size = 10px
• & > .fa font-size = 1.25 * 10px = 12.5px
• Replace with $font-size-sm = 12px

rule-engine.scss

.cw-filter-links {
    padding: $spacing-1;
    font-size: 0.8em;
    color: $foreground-disabled;

    span:first-child {
        padding: 0 4px 0 0;
    }

    span {
        padding: 0 4px;
    }
}

• It was taking a base of 16px, so 0.8 * 16px = 12.8px
• Replace with $font-size-sm = 12px

Screenshots

Original	Updated

This PR fixes: #28724

This PR fixes: #28724

[dotcms-sonarqube]

Quality Gate passed

Issues
0 New issues
3 Fixed issues
0 Accepted issues

Measures
0 Security Hotspots
No data about Coverage
0.0% Duplication on New Code

See analysis details on SonarQube