[Bug Report][3.5.15] Customizing typography

[miladmeidanshahi]

Environment

Vuetify Version: 3.5.15 Vue Version: 3.4.21 Browsers: Chrome 123.0.0.0 OS: Linux x86_64

Steps to reproduce

Hi, I need to customize and overwrite Vuetify default typography but when I change the sass variables my custom class and Vuetify default typography class still working.

my nuxt setting:

export default defineNuxtConfig({
  devtools: { enabled: true },
  modules: [
    'vuetify-nuxt-module'
  ],
  css: ['~/assets/styles/main.scss'],
  vuetify: {
    moduleOptions: {
      styles: {
        configFile: './assets/styles/settings.scss'
      }
    }
  },
  features: {
    inlineStyles: false
  }
})

settings.scss

@use './variables' as *;

@forward 'vuetify/settings' with (
  $utilities: (
    "typography": $typography,
  )
);

main.scss

@use 'vuetify/lib/styles/tools/functions' as *;

$body-font-family: 'Roboto', sans-serif;

$heading-font-family: $body-font-family;

$typography: ();
$typography: map-deep-merge(
  (
    'T1': (
      'size': 1.375rem,
      'weight': 400,
      'line-height': 2.125rem,
      'letter-spacing': 0,
      'font-family': $heading-font-family,
      'text-transform': none
    ),
    'T2': (
      'size': 1.25rem,
      'weight': 400,
      'line-height': 2rem,
      'letter-spacing': 0,
      'font-family': $heading-font-family,
      'text-transform': none
    ),
    'T3': (
      'size': 1.125rem,
      'weight': 400,
      'line-height': 1.875rem,
      'letter-spacing': 0,
      'font-family': $heading-font-family,
      'text-transform': none
    ),
    'T4': (
      'size': 1rem,
      'weight': 400,
      'line-height': 1.75rem,
      'letter-spacing': 0,
      'font-family': $heading-font-family,
      'text-transform': none
    ),
    'T5': (
      'size': 0.875rem,
      'weight': 400,
      'line-height': 1.5rem,
      'letter-spacing': 0,
      'font-family': $heading-font-family,
      'text-transform': none
    ),
    'T6': (
      'size': 0.75rem,
      'weight': 400,
      'line-height': 1.125rem,
      'letter-spacing': 0,
      'font-family': $heading-font-family,
      'text-transform': none
    ),
  ),
  $typography
);

@use 'vuetify' with (
  $typography: $typography
);

<div class="text-T1">test</div> //works great
<div class="text-H1">test</div> //this class shouldn't work anymore but working 🤔 

Expected Behavior

When customize typography variable default typography class should be remove.

Actual Behavior

Still Vuetify typography classes with this config works.

Reproduction Link

https://github.com

[KaelWD]

Maps are merged not overwritten, and the default values are also used by components.

[miladmeidanshahi]

Thanks, Can you show me an example of how to overwrite

[KaelWD]

1. You can't
2. Even if you could it would break things

The only way to do this is $utilities: (typography: false) and generate the css yourself.