Skip to content

feat(typography): MD3 alignment, configuration from JS, VTypography component#21440

Closed
toureSan wants to merge 31 commits intovuetifyjs:nextfrom
toureSan:feature/typography-component
Closed

feat(typography): MD3 alignment, configuration from JS, VTypography component#21440
toureSan wants to merge 31 commits intovuetifyjs:nextfrom
toureSan:feature/typography-component

Conversation

@toureSan
Copy link
Copy Markdown

@toureSan toureSan commented May 20, 2025 •
edited by J-Sek
Loading

Description

New v-typography component for predefined text styles

Key features:

  • Material Design 3 text variants (display, headline, body, label) (spec)
  • Responsive design with breakpoint support
  • Theme color integration
  • Custom HTML tag support

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>

@johnleider johnleider requested a review from Copilot May 20, 2025 16:18

This comment was marked as outdated.

Sign in to view

@toureSan toureSan changed the title feat(typography): add VTypography component feat(typography): VTypography component -> correction May 26, 2025
@toureSan toureSan force-pushed the feature/typography-component branch from f89e223 to f86b714 Compare June 20, 2025 13:30
@johnleider johnleider requested review from ikushum and johnleider July 17, 2025 18:56
@KaelWD KaelWD force-pushed the master branch 4 times, most recently from 142b234 to bb54746 Compare September 12, 2025 09:01
J-Sek
J-Sek reviewed Nov 27, 2025
View reviewed changes
packages/vuetify/src/composables/typography.ts
import { mergeDeep } from '@/util'

export const defaultTypography = {
'display-large': {
Copy link
Copy Markdown
Contributor

@J-Sek J-Sek Nov 27, 2025 •
edited
Loading

Choose a reason for hiding this comment

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

Alternative structure could be convenient to avoid duplication as well as easily opt out from some of the variants.

{
  display: {
    fontWeight: 400,
    variants: {
       large: { fontSize: '5rem', lineHeight: 0.9 },
       medium: { fontSize: '4rem', lineHeight: 1 },
       small: { fontSize: '3rem', lineHeight: 1.1 },
		},
	},
  headline: { ... }
  body: { ... }
  label: { ... }
}

Customized options could look like this:

{
  display: {
    fontFamily: '...',
    fontWeight: 500,
    variants: {
       large: { fontSize: '4rem', lineHeight: 1 },
       medium: { fontSize: '3.5rem' },
    },
  },
  headline: { 
    fontFamily: '...',
    variants: {
      medium: false,
      base: { ... },
    },
  },
  label: false
}

@toureSan toureSan force-pushed the feature/typography-component branch from b0a13ca to 4ee7c8a Compare November 27, 2025 16:29
@toureSan toureSan force-pushed the feature/typography-component branch from 5e05e24 to d9bfa0c Compare December 4, 2025 15:53
J-Sek
J-Sek reviewed Dec 5, 2025
View reviewed changes
J-Sek
J-Sek requested changes Dec 5, 2025
View reviewed changes
@J-Sek J-Sek changed the title feat(typography): VTypography component -> correction feat(typography): MD3 alignment, configuration from JS, VTypography component Dec 18, 2025
@J-Sek J-Sek mentioned this pull request Dec 19, 2025
Closed
5 tasks
@J-Sek
Copy link
Copy Markdown
Contributor

J-Sek commented Dec 19, 2025

closing in favor of #22459

@J-Sek J-Sek closed this Dec 19, 2025
@J-Sek J-Sek added C: New Component This issue would need a new component to be developed. MD3 and removed C: VAvatarGroup labels Mar 10, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

Copilot code review Copilot Copilot left review comments

@J-Sek J-Sek J-Sek requested changes

@johnleider johnleider Awaiting requested review from johnleider

@ikushum ikushum Awaiting requested review from ikushum

Assignees

No one assigned

Labels

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

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

5 participants

@toureSan @J-Sek @MajesticPotatoe @KaelWD