[Bug Report] Override headings tag in variables.scss (h1, h2...)

nlien commented 5 years ago

Environment

Vuetify Version: 2.1.2 Vue Version: 2.6.10 Browsers: Firefox 69.0 OS: Ubuntu undefined

Steps to reproduce

Create a Vue CLI 3 project
Add vuetify (vue add vuetify)
Create a folder called sass in the src directory
Create a file called variables.scss in the sass directory ** Paste the following contents into the file:
```
$font-size-root: 18px;
$headings: map-deep-set($headings, 'h1' 'size', 32px);
```
Start the app (npm run serve)
Notice how the font-size-root is applied correctly (18px)
Notice how the h1-tag's font size is not applied correctly (should be 32px)

Expected Behavior

The h1-tag should have a font-size of 32px according to the variables.scss file

Actual Behavior

The h1-tag is given the browser's standard font-size, not the size given in the variables.scss file

Reproduction Link

https://github.com/nlien/vuetify-heading-issue

Other comments

Important The devDep vue-cli-plugin-vuetify must be at version 1.0.0. It seems that the latest version (1.0.1) has broken some functionality...

nlien commented 5 years ago

I realize that the $headings: map-deep-set($headings, 'h1' 'size', 32px); will apply to the class display-4 as per the ~vuetify/src/styles/elements/_typography.sass:

.v-application
  .display-4
    font-size: map-deep-get($headings, 'h1', 'size') !important
    font-weight: map-deep-get($headings, 'h1', 'weight')
    line-height: map-deep-get($headings, 'h1', 'line-height')
    letter-spacing: map-deep-get($headings, 'h1', 'letter-spacing') !important
    font-family: map-deep-get($headings, 'h1', 'font-family') !important

Nevertheless, I find this confusing. I expected that the $headings definition of h1 would apply to the corresponding tag, or at least to the same class (.h1). The latter is the case for e.g. .subtitle-1:

.v-application
  .subtitle-1
    font-size: map-deep-get($headings, 'subtitle-1', 'size') !important
    font-weight: map-deep-get($headings, 'subtitle-1', 'weight')
    letter-spacing: map-deep-get($headings, 'subtitle-1', 'letter-spacing') !important
    line-height: map-deep-get($headings, 'subtitle-1', 'line-height')

johnleider commented 5 years ago

Update your vue-cli-plugin-vuetify to ^1.0.0, update Vuetify to v2.1.3 and follow the updated guide https://vuetifyjs.com/en/customization/sass-variables

nlien commented 5 years ago

I'm sorry, but this issue is about giving styles to the actual h1...6 HTML tags. Ref. #8292. Upgrading the mentioned libs doesn't solve this. I propose labeling this issue with wontfix if that's the intention.

Maybe the docs should be clear about when you override the h1...6 heading variables, you are actually targeting the display-4 (h1 variable), display-3 (h2 variable), display-2 (h3 variable), display-1 (h4 variable), headline (h5 variable) and title (h6 variable) classes (which is slightly confusing).

KaelWD commented 5 years ago

tommykamkcm commented 4 years ago

Hi @johnleider @nlien I'm not sure but it seems to partially work on my verison:

This image shows my app.scss

This image shows the result

the 1st line (declared before importing the main.sass) was bundled to the app.css. I guess we are at a good spot and the next step is probably figure out why the

vuetifyjs / vuetify