search

PolymerElements / paper-progress

A Material Design progress
32 stars 43 forks source link

Feature: optional paper-styles/color.html import #73

Open hotforfeature opened 6 years ago

hotforfeature commented 6 years ago

Description

When importing <paper-progress>, it additionally imports paper-styles/color.html. This adds a not-insignificant 7.64kb (2.03kb gzipped) when bundling, or another HTTP request when using imports.

Expected outcome

I believe an extremely common use case is for a developer to style the primary and secondary progress bars with their own color, and not the Google green. I do think it's a common use case to leave the container and disabled progress bar the default Google grey.

The bar uses the following four variables imported from paper-styles:

--google-green-500
--google-green-100
--google-grey-500
--google-grey-100

Actual outcome

When the progress bar is styled differently and a project does not use paper-styles at all, it is frustrating to have extra data that is never being used.

I think the best solution would be to remove the paper-styles/color.html import and add a tertiary default for the colors. That way, if the user has included paper-styles/color.html in their project, the progress bar can use them as defaults without forcing the huge color list to be included.

Ex:

#primaryProgress {
-  background: var(--paper-progress-active-color, var(--google-green-500));
+  background: var(--paper-progress-active-color, var(--google-green-500, var(green)));
}

Another alternative could be to refactor the paper-styles repo and split color.html into several different files for the different colors and only import the google colors needed. That might be a bit overkill though.

Steps to reproduce

Import <paper-progress> into a project that is not importing paper-styles/color.html.

Browsers Affected