Can't override --paper-font-common-base_-_font-family from document level

[RhysyG]

Description

Can't overwrite default font (Roboto) using custom property mixin when any paper font mixins are referenced ie: @apply(--paper-font-sunhead); as it looks like nested CSS variables get confused.

Live example: https://codepen.io/rhysyg03/pen/YxgYQp?editors=1100

When a CSS variable is nested, in this example:

• font-family: var(--paper-font-subhead_-_font-family)
• refers back to
• font-family: var(--paper-font-common-base_-_font-family)

--paper-font-subhead_-_font-family variable refers back to variable in the same declaration (html) even if it’s been overwritten (.my-class).

Expected outcome

The NEW --paper-font-common-base_-_font-family mixin would overwrite default variable.

Actual outcome

The NEW --paper-font-common-base_-_font-family mixin DOES NOT get overwritten.

Steps to reproduce

1. add @apply(--paper-font-body1) to a Polymer element
2. override the @apply --paper-font-common-base mixin with custom font from the document level

Browsers Affected

• [x] Chrome
• [ ] Firefox
• [ ] Safari 9
• [ ] Safari 8
• [ ] Safari 7
• [ ] Edge
• [ ] IE 11
• [ ] IE 10

[KeithHenry]

I have the same problem, which I've raised on SO.

I don't want to use Roboto and I don't want to download it from the Google fonts API (not all my users can access it, so they get errors or long waits).

The issue is easy to reproduce: set your own --paper-font-common-base in the app shell, before importing any components:

--paper-font-common-base: {
    font-family: 'Comic Sans'; 
    /* Not really, nobody's that evil, but problem is there for any font */
};

Import paper-radio-button - --paper-font-common-base remains unchanged. This is because that control explicitly avoids loading typography.html.

Import paper-dialog - that imports typography.html which overrides the font set:

https://github.com/PolymerElements/paper-styles/blob/739c14c9114dd3f80172e43d4ea2c5faf9bae132/typography.html#L12

https://github.com/PolymerElements/paper-styles/blob/739c14c9114dd3f80172e43d4ea2c5faf9bae132/typography.html#L22-L30

typography.html should not be setting --paper-font-common-base if it has already been set.

[Clay-Ferguson]

Looks like it's also impossible to override paper-item(s) in paper-menu, with the paper-font-common-base for some reason. Everything but paper-item (menu) gets set to correct font but the menu all insists on sticking to Roboto font no matter what i do.

[KeithHenry]

@Clay-Ferguson <paper-menu> has been deprecated, use <paper-listbox> instead.