[Feature Request] Overwriting Heading variables

[ottz0]

Problem to solve

I am trying to overwrite the Vuetify Heading variables. I am using the variables.scss file in the scss folder as per setup and this works correctly as I can update $border-radius-root and $card-elevation variables in which it updates.

Iv'e looked at the vuetify SASS docs and have put the following in my variables doc

$headings: (
'h1': (
'size': 8.3125rem,
'line-height': 1.15em
)
)

However it doe not update.

What are the steps and process to update and overwrite the $headings variables for H1,H2,body-1 etc as I have tried every approach.

Proposed solution

Documentation on how to update and overwrite heading variables

[Tarabass]

Are you also defining the style onto a h1 like this?

h1 {
  font-size: map-deep-get($headings, 'h1', 'size');
  line-height: map-deep-get($headings, 'h1', 'line-height');
}

[ottz0]

$headings: () !default;
h1 {
font-size: map-deep-get($headings, 'h1', '80');
line-height: map-deep-get($headings, 'h1', '25');
}

I get a compilation error saying $headings isn't a valid css value

[Tarabass]

First you declare a sass variable with all your desired values. Then you use that sass variable (object) to set your styling using map-deep-get, which is just sass..

This should work:

$headings: (
  'h1': (
    'size': 6rem,
    'line-height': 6rem
  ),
  'h2': (
    'size': 2.5rem,
    'line-height': 2.5rem
  )
)

h1 {
  color: map-deep-get($material-light, 'text', 'primary');
  font-size: map-deep-get($headings, 'h1', 'size');
  line-height: map-deep-get($headings, 'h1', 'line-height');
}

h2 {
  color: map-deep-get($material-light, 'text', 'secondary');
  font-size: map-deep-get($headings, 'h2', 'size');
  line-height: map-deep-get($headings, 'h2', 'line-height');
}

[KaelWD]

Duplicate of #9306