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

• 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:

paper-styles/typography.html

Line 12 in 739c14c

<link rel="import" href="../font-roboto/roboto.html">

paper-styles/typography.html

Lines 22 to 30 in 739c14c

	<custom-style>
	<style is="custom-style">
	html {
	/* Shared Styles */
	--paper-font-common-base: {
	font-family: 'Roboto', 'Noto', sans-serif;
	-webkit-font-smoothing: antialiased;
	};

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.