Skip to content

feat: MD3 typography dynamic configuration + new component#22459

Closed
J-Sek wants to merge 11 commits intonextfrom
feature/typography-in-JS
Closed

feat: MD3 typography dynamic configuration + new component#22459
J-Sek wants to merge 11 commits intonextfrom
feature/typography-in-JS

Conversation

@J-Sek
Copy link
Copy Markdown
Contributor

@J-Sek J-Sek commented Dec 19, 2025 •
edited
Loading

Description

continuation of #21440

  • new way to define typography (in JavaScript configuration)
  • dynamically injects <styles> into <head> (same as theme.ts)
  • dedicated v-typography component to help standardize styles in the app
  • drop Sass
  • verify all affected components (docs examples)
    • re-do migration
  • migration guide should mention re-mapping Sass variables
  • update blueprints

Markup:

<template>
  <VContainer>
    <VRow>
      <VCol cols="12">
        <h2 class="text-h4 mb-4">Typography Examples</h2>
      </VCol>
    </VRow>

    <!-- Display Examples -->
    <VRow>
      <VCol cols="12">
        <VTypography variant="display-large">
          Display Large Text
        </VTypography>
        <VTypography variant="display-medium">
          Display Medium Text
        </VTypography>
        <VTypography variant="display-small">
          Display Small Text
        </VTypography>
      </VCol>
    </VRow>

    <!-- Headline Examples -->
    <VRow>
      <VCol cols="12">
        <VTypography variant="headline-large">
          Headline Large Text
        </VTypography>
        <VTypography variant="headline-medium">
          Headline Medium Text
        </VTypography>
        <VTypography variant="headline-small">
          Headline Small Text
        </VTypography>
      </VCol>
    </VRow>

    <!-- Body Examples -->
    <VRow>
      <VCol cols="12">
        <VTypography variant="body-large">
          Body Large Text
        </VTypography>
        <VTypography variant="body-medium">
          Body Medium Text
        </VTypography>
        <VTypography variant="body-small">
          Body Small Text
        </VTypography>
      </VCol>
    </VRow>

    <!-- Label Examples -->
    <VRow>
      <VCol cols="12">
        <VTypography variant="label-large">
          Label Large Text
        </VTypography>
        <VTypography variant="label-medium">
          Label Medium Text
        </VTypography>
        <VTypography variant="label-small">
          Label Small Text
        </VTypography>
      </VCol>
    </VRow>

    <!-- Responsive Example -->
    <VRow>
      <VCol cols="12">
        <VTypography
          color="primary"
          variant="body-large"
          lg="headline-medium"
        >
          Responsive Text (larger for <v-code>lg</v-code> and above)
        </VTypography>
        <pre>(current breakpoint: {{ $vuetify.display.name }})</pre>
      </VCol>
    </VRow>

    <!-- Custom Tag Example -->
    <VRow>
      <VCol cols="12">
        <VTypography
          variant="body-medium"
          tag="p"
        >
          This is a paragraph using the body-medium style
        </VTypography>
      </VCol>
    </VRow>
  </VContainer>
</template>

@J-Sek J-Sek self-assigned this Dec 19, 2025
@J-Sek J-Sek added T: feature A new feature C: New Component This issue would need a new component to be developed. labels Dec 19, 2025
@J-Sek J-Sek mentioned this pull request Dec 19, 2025
Closed
@J-Sek J-Sek marked this pull request as draft December 19, 2025 01:07
@J-Sek J-Sek force-pushed the feature/typography-in-JS branch from b7d101a to 40867f7 Compare December 19, 2025 02:43
@J-Sek J-Sek marked this pull request as ready for review December 19, 2025 02:44
@J-Sek J-Sek force-pushed the feature/typography-in-JS branch 5 times, most recently from 210212e to d3bdbfb Compare December 19, 2025 14:03
@J-Sek J-Sek changed the title feat: add VTypography component with dynamic configuration feat: MD3 typography dynamic configuration + new component Dec 22, 2025
@J-Sek J-Sek force-pushed the feature/typography-in-JS branch 4 times, most recently from 1f8469a to 4ca55db Compare January 1, 2026 17:49
@J-Sek J-Sek force-pushed the feature/typography-in-JS branch 2 times, most recently from e20e2ad to c157613 Compare January 2, 2026 17:38
@J-Sek J-Sek force-pushed the feature/typography-in-JS branch from c157613 to ffe7be5 Compare January 26, 2026 02:52
@J-Sek J-Sek force-pushed the feature/typography-in-JS branch from ffe7be5 to d5b8738 Compare January 26, 2026 03:01
@J-Sek J-Sek force-pushed the feature/typography-in-JS branch from a5d54fc to bf61a2b Compare January 26, 2026 04:08
@J-Sek J-Sek force-pushed the feature/typography-in-JS branch from 87f6ad3 to b56f649 Compare January 26, 2026 12:15
@J-Sek J-Sek force-pushed the feature/typography-in-JS branch from b56f649 to 58c436c Compare January 26, 2026 13:49
@KaelWD
Copy link
Copy Markdown
Member

KaelWD commented Jan 27, 2026

  • Does this actually make sense as a component? Especially with the default tag being div idk why anyone would choose to use this over just a class.
<VTypography tag="h1" variant="display-large"></VTypography>

<h1 class="text-display-large"></h1>
  • css-in-js causes FOUC with SSR, theme supports unhead to mitigate this but that's another 15kB in the html. We only did that for theme because it's often dynamic, I don't see any demand for dynamic typography.
  • The class changes are alright but they will need an update to eslint-plugin-vuetify.

KaelWD
KaelWD reviewed Jan 27, 2026
View reviewed changes
packages/vuetify/src/composables/__tests__/typography.spec.ts
expect(wrapper.classes()).toContain('v-typography')
expect(wrapper.classes()).toContain('text-body-medium')
expect(wrapper.attributes('style') ?? '').toContain('font-size: 20px')
expect(wrapper.attributes('style') ?? '').toContain('font-weight: bold')
Copy link
Copy Markdown
Member

@KaelWD KaelWD Jan 27, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

.toHaveClass and .toHaveStyle exist

@J-Sek J-Sek mentioned this pull request Jan 27, 2026
Merged
@J-Sek
Copy link
Copy Markdown
Contributor Author

J-Sek commented Jan 27, 2026

css-in-js causes FOUC with SSR, theme supports unhead to mitigate this but that's another 15kB in the html. We only did that for theme because it's often dynamic, I don't see any demand for dynamic typography

Yeah.. I forgot about this TODO.

image

I agree it would bloat SSR payload.

How do you like #22557 instead?

@J-Sek J-Sek closed this Jan 28, 2026
@J-Sek J-Sek deleted the feature/typography-in-JS branch January 28, 2026 22:18
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@KaelWD KaelWD KaelWD left review comments

Assignees

@J-Sek J-Sek

Labels

C: New Component This issue would need a new component to be developed. T: feature A new feature

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@J-Sek @KaelWD