Skip to content

Type ramp variables are set incorrectly in FluentDesignSystemProvider #2690

@dukeofqueens

Description

@dukeofqueens

🐛 Bug Report

The FluentDesignSystemProvider component is setting the wrong variables for the plus and minus type-ramp.

💻 Repro or Code Sample

       type-ramp-minus2-font-size="@TypeRampMinus2FontSize"
        type-ramp-minus2-line-height="@TypeRampMinus2LineHeight"
        type-ramp-minus1-font-size="@TypeRampMinus1FontSize"
        type-ramp-minus1-line-height="@TypeRampMinus1LineHeight"
        type-ramp-base-font-size="@TypeRampBaseFontSize"
        type-ramp-base-line-height="@TypeRampBaseLineHeight"
        type-ramp-plus1-font-size="@TypeRampPlus1FontSize"
        type-ramp-plus1-line-height="@TypeRampPlus1LineHeight"
        type-ramp-plus2-font-size="@TypeRampPlus2FontSize"
        type-ramp-plus2-line-height="@TypeRampPlus2LineHeight"
        type-ramp-plus3-font-size="@TypeRampPlus3FontSize"
        type-ramp-plus3-line-height="@TypeRampPlus3LineHeight"
        type-ramp-plus4-font-size="@TypeRampPlus4FontSize"
        type-ramp-plus4-line-height="@TypeRampPlus4LineHeight"
        type-ramp-plus5-font-size="@TypeRampPlus5FontSize"
        type-ramp-plus5-line-height="@TypeRampPlus5LineHeight"
        type-ramp-plus6-font-size="@TypeRampPlus6FontSize"
        type-ramp-plus6-line-height="@TypeRampPlus6LineHeight"

🤔 Expected Behavior

Using type-ramp-plus1-font-size as an example.

In the CSS it is plus-1

4 results - 4 files

examples/Demo/Shared/wwwroot/css/site.css:
107 nav h2 {
108: font-size: var(--type-ramp-plus-1-font-size);
109 line-height: var(--type-ramp-plus-1-line-height);

src/Core/Components/Header/FluentHeader.razor.css:
7 font-weight: bold;
8: font-size: var(--type-ramp-plus-1-font-size);
9 line-height: var(--type-ramp-plus-1-line-height);

src/Core/Components/Label/FluentLabel.razor.css:
21 .fluent-typography[typo='subject'] {
22: font-size: var(--type-ramp-plus-1-font-size);
23 line-height: var(--type-ramp-plus-1-line-height);

src/Core/wwwroot/css/reboot.css:
72 h5 {
73: font-size: var(--type-ramp-plus-1-font-size);
74 line-height: var(--type-ramp-plus-1-line-height);

😯 Current Behavior

It sets the wrong variable.

Metadata

Metadata

Assignees

No one assigned

    Labels

    triageNew issue. Needs to be looked at

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions