Skip to content

feat: MD3 typography dynamic configuration + new component #22459

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
J-Sek wants to merge 14 commits into
base: next
Choose a base branch
from
Open

feat: MD3 typography dynamic configuration + new component #22459

J-Sek wants to merge 14 commits into from
+1,879 −769

Conversation

@J-Sek
Copy link
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
    • fix bugs
  • migration guide should mention re-mapping Sass variables

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
Toure Maka (DIN) and others added 6 commits December 19, 2025 11:49
@J-Sek
feat: add VTypography component
66c88be
@J-Sek
chore: cleanup and more configuration
58675d6 
- configurable styles for main `.v-typography`
- optional scoping
- configurable prefix, CSP key, stylesheet ID
- dependency on ./display.ts
- `_css` will be removed once tests are rewritten
@J-Sek
chore: revert unrelated changes + minor cleanup
27ff3a6
@J-Sek
chore: move component to labs
d5f2801
@J-Sek
chore: rework convenient variable support
a8cd052
@J-Sek
chore: drop default variant, pass styles directly
30f0b79
@J-Sek J-Sek force-pushed the feature/typography-in-JS branch 2 times, most recently from 4c6c3ad to 28f0cda Compare December 19, 2025 11:05
@J-Sek J-Sek force-pushed the feature/typography-in-JS branch 2 times, most recently from 72ef0f6 to 210212e Compare December 19, 2025 14:00
@J-Sek J-Sek force-pushed the feature/typography-in-JS branch 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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

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.

1 participant

@J-Sek