polythene-theme - npm Package Compare versions

Comparing version 0.1.12 to 0.1.13

lib/button/button.es6.js

@@ -1,4 +0,5 @@
-'use strict';
+import styler from 'polythene-theme/common/styler';
+import style from 'polythene-theme/button/button-style';
+import color from 'polythene-theme/button/button-style-color';
 
-require('polythene-theme/button/button.css!');
-require('polythene-theme/button/button-color.css!');
+styler.add('polythene-style-button', style, color);

lib/button/button.js

@@ -1,1 +0,1 @@
-"use strict";require("polythene-theme/button/button.css!");require("polythene-theme/button/button-color.css!");
+"use strict";function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{"default":obj}}var _polytheneThemeCommonStyler=require("polythene-theme/common/styler");var _polytheneThemeCommonStyler2=_interopRequireDefault(_polytheneThemeCommonStyler);var _polytheneThemeButtonButtonStyle=require("polythene-theme/button/button-style");var _polytheneThemeButtonButtonStyle2=_interopRequireDefault(_polytheneThemeButtonButtonStyle);var _polytheneThemeButtonButtonStyleColor=require("polythene-theme/button/button-style-color");var _polytheneThemeButtonButtonStyleColor2=_interopRequireDefault(_polytheneThemeButtonButtonStyleColor);_polytheneThemeCommonStyler2["default"].add("polythene-style-button",_polytheneThemeButtonButtonStyle2["default"],_polytheneThemeButtonButtonStyleColor2["default"]);

lib/card/card.es6.js

@@ -1,4 +0,5 @@
-'use strict';
+import styler from 'polythene-theme/common/styler';
+import style from 'polythene-theme/card/card-style';
+import color from 'polythene-theme/card/card-style-color';
 
-require('polythene-theme/card/card.css!');
-require('polythene-theme/card/card-color.css!');
+styler.add('polythene-style-card', style, color);

lib/card/card.js

@@ -1,1 +0,1 @@
-"use strict";require("polythene-theme/card/card.css!");require("polythene-theme/card/card-color.css!");
+"use strict";function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{"default":obj}}var _polytheneThemeCommonStyler=require("polythene-theme/common/styler");var _polytheneThemeCommonStyler2=_interopRequireDefault(_polytheneThemeCommonStyler);var _polytheneThemeCardCardStyle=require("polythene-theme/card/card-style");var _polytheneThemeCardCardStyle2=_interopRequireDefault(_polytheneThemeCardCardStyle);var _polytheneThemeCardCardStyleColor=require("polythene-theme/card/card-style-color");var _polytheneThemeCardCardStyleColor2=_interopRequireDefault(_polytheneThemeCardCardStyleColor);_polytheneThemeCommonStyler2["default"].add("polythene-style-card",_polytheneThemeCardCardStyle2["default"],_polytheneThemeCardCardStyleColor2["default"]);

lib/dialog/dialog.es6.js

@@ -1,4 +0,5 @@
-'use strict';
+import styler from 'polythene-theme/common/styler';
 
-require('polythene-theme/dialog/dialog.css!');
-require('polythene-theme/dialog/dialog-color.css!');
+import style from 'polythene-theme/dialog/dialog-style';
+import color from 'polythene-theme/dialog/dialog-style-color';
+styler.add('polythene-style-dialog', style, color);

lib/dialog/dialog.js

@@ -1,1 +0,1 @@
-"use strict";require("polythene-theme/dialog/dialog.css!");require("polythene-theme/dialog/dialog-color.css!");
+"use strict";function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{"default":obj}}var _polytheneThemeCommonStyler=require("polythene-theme/common/styler");var _polytheneThemeCommonStyler2=_interopRequireDefault(_polytheneThemeCommonStyler);var _polytheneThemeDialogDialogStyle=require("polythene-theme/dialog/dialog-style");var _polytheneThemeDialogDialogStyle2=_interopRequireDefault(_polytheneThemeDialogDialogStyle);var _polytheneThemeDialogDialogStyleColor=require("polythene-theme/dialog/dialog-style-color");var _polytheneThemeDialogDialogStyleColor2=_interopRequireDefault(_polytheneThemeDialogDialogStyleColor);_polytheneThemeCommonStyler2["default"].add("polythene-style-dialog",_polytheneThemeDialogDialogStyle2["default"],_polytheneThemeDialogDialogStyleColor2["default"]);

lib/element/element.es6.js

@@ -1,1 +0,1 @@
-// This component does not have any styles defined
+// No styles for this component

lib/fab/fab.es6.js

@@ -1,3 +0,4 @@
-'use strict';
+import styler from 'polythene-theme/common/styler';
 
-require('polythene-theme/fab/fab.css!');
+import style from 'polythene-theme/fab/fab-style';
+styler.add('polythene-style-fab', style);

lib/fab/fab.js

@@ -1,1 +0,1 @@
-"use strict";require("polythene-theme/fab/fab.css!");
+"use strict";function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{"default":obj}}var _polytheneThemeCommonStyler=require("polythene-theme/common/styler");var _polytheneThemeCommonStyler2=_interopRequireDefault(_polytheneThemeCommonStyler);var _polytheneThemeFabFabStyle=require("polythene-theme/fab/fab-style");var _polytheneThemeFabFabStyle2=_interopRequireDefault(_polytheneThemeFabFabStyle);_polytheneThemeCommonStyler2["default"].add("polythene-style-fab",_polytheneThemeFabFabStyle2["default"]);

lib/font-roboto/font-roboto.es6.js

@@ -1,3 +0,2 @@
-'use strict';
-
-require('polythene-theme/font-roboto/font-roboto.css!');
+import webfontLoader from 'polythene-theme/common/webfontLoader';
+webfontLoader.add('google', 'Roboto:400,500,700,400italic:latin');

lib/font-roboto/font-roboto.js

@@ -1,1 +0,1 @@
-"use strict";require("polythene-theme/font-roboto/font-roboto.css!");
+"use strict";function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{"default":obj}}var _polytheneThemeCommonWebfontLoader=require("polythene-theme/common/webfontLoader");var _polytheneThemeCommonWebfontLoader2=_interopRequireDefault(_polytheneThemeCommonWebfontLoader);_polytheneThemeCommonWebfontLoader2["default"].add("google","Roboto:400,500,700,400italic:latin");

lib/font-roboto/font-roboto.md

 # Roboto Font
 
-Adds CSS to load the RobotoDraft font.
+Loads the Roboto font through Google's webfont loader.
 
@@ -8,7 +8,4 @@
 
-	require('polythene/font-roboto/font-roboto');
-
-
-## Generated CSS
-
-	@import url("https://fonts.googleapis.com/css?family=RobotoDraft:400,500,700,400italic");
+~~~javascript
+require('polythene-theme/font-roboto/font-roboto');
+~~~

lib/header-panel/header-panel.es6.js

@@ -1,3 +0,4 @@
-'use strict';
+import styler from 'polythene-theme/common/styler';
 
-require('polythene-theme/header-panel/header-panel.css!');
+import style from 'polythene-theme/header-panel/header-panel-style';
+styler.add('polythene-style-header-panel', style);

lib/header-panel/header-panel.js

@@ -1,1 +0,1 @@
-"use strict";require("polythene-theme/header-panel/header-panel.css!");
+"use strict";function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{"default":obj}}var _polytheneThemeCommonStyler=require("polythene-theme/common/styler");var _polytheneThemeCommonStyler2=_interopRequireDefault(_polytheneThemeCommonStyler);var _polytheneThemeHeaderPanelHeaderPanelStyle=require("polythene-theme/header-panel/header-panel-style");var _polytheneThemeHeaderPanelHeaderPanelStyle2=_interopRequireDefault(_polytheneThemeHeaderPanelHeaderPanelStyle);_polytheneThemeCommonStyler2["default"].add("polythene-style-header-panel",_polytheneThemeHeaderPanelHeaderPanelStyle2["default"]);

lib/icon-button/icon-button.es6.js

@@ -1,4 +0,5 @@
-'use strict';
+import styler from 'polythene-theme/common/styler';
+import style from 'polythene-theme/icon-button/icon-button-style';
+import color from 'polythene-theme/icon-button/icon-button-style-color';
 
-require('polythene-theme/icon-button/icon-button.css!');
-require('polythene-theme/icon-button/icon-button-color.css!');
+styler.add('polythene-style-icon-button', style, color);

lib/icon-button/icon-button.js

@@ -1,1 +0,1 @@
-"use strict";require("polythene-theme/icon-button/icon-button.css!");require("polythene-theme/icon-button/icon-button-color.css!");
+"use strict";function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{"default":obj}}var _polytheneThemeCommonStyler=require("polythene-theme/common/styler");var _polytheneThemeCommonStyler2=_interopRequireDefault(_polytheneThemeCommonStyler);var _polytheneThemeIconButtonIconButtonStyle=require("polythene-theme/icon-button/icon-button-style");var _polytheneThemeIconButtonIconButtonStyle2=_interopRequireDefault(_polytheneThemeIconButtonIconButtonStyle);var _polytheneThemeIconButtonIconButtonStyleColor=require("polythene-theme/icon-button/icon-button-style-color");var _polytheneThemeIconButtonIconButtonStyleColor2=_interopRequireDefault(_polytheneThemeIconButtonIconButtonStyleColor);_polytheneThemeCommonStyler2["default"].add("polythene-style-icon-button",_polytheneThemeIconButtonIconButtonStyle2["default"],_polytheneThemeIconButtonIconButtonStyleColor2["default"]);

lib/icon/icon.es6.js

@@ -1,3 +0,4 @@
-'use strict';
+import styler from 'polythene-theme/common/styler';
+import style from 'polythene-theme/icon/icon-style';
 
-require('polythene-theme/icon/icon.css!');
+styler.add('polythene-style-icon', style);

lib/icon/icon.js

@@ -1,1 +0,1 @@
-"use strict";require("polythene-theme/icon/icon.css!");
+"use strict";function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{"default":obj}}var _polytheneThemeCommonStyler=require("polythene-theme/common/styler");var _polytheneThemeCommonStyler2=_interopRequireDefault(_polytheneThemeCommonStyler);var _polytheneThemeIconIconStyle=require("polythene-theme/icon/icon-style");var _polytheneThemeIconIconStyle2=_interopRequireDefault(_polytheneThemeIconIconStyle);_polytheneThemeCommonStyler2["default"].add("polythene-style-icon",_polytheneThemeIconIconStyle2["default"]);

lib/item/item.es6.js

@@ -1,3 +0,4 @@
-'use strict';
+import styler from 'polythene-theme/common/styler';
 
-require('polythene-theme/item/item.css!');
+import style from 'polythene-theme/item/item-style';
+styler.add('polythene-style-item', style);

lib/item/item.js

@@ -1,1 +0,1 @@
-"use strict";require("polythene-theme/item/item.css!");
+"use strict";function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{"default":obj}}var _polytheneThemeCommonStyler=require("polythene-theme/common/styler");var _polytheneThemeCommonStyler2=_interopRequireDefault(_polytheneThemeCommonStyler);var _polytheneThemeItemItemStyle=require("polythene-theme/item/item-style");var _polytheneThemeItemItemStyle2=_interopRequireDefault(_polytheneThemeItemItemStyle);_polytheneThemeCommonStyler2["default"].add("polythene-style-item",_polytheneThemeItemItemStyle2["default"]);

lib/layout/layout.es6.js

@@ -1,3 +0,4 @@
-'use strict';
+import styler from 'polythene-theme/common/styler';
+import style from 'polythene-theme/layout/layout-style';
 
-require('polythene-theme/layout/layout.css!');
+styler.add('polythene-style-layout', style);

lib/layout/layout.js

@@ -1,1 +0,1 @@
-"use strict";require("polythene-theme/layout/layout.css!");
+"use strict";function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{"default":obj}}var _polytheneThemeCommonStyler=require("polythene-theme/common/styler");var _polytheneThemeCommonStyler2=_interopRequireDefault(_polytheneThemeCommonStyler);var _polytheneThemeLayoutLayoutStyle=require("polythene-theme/layout/layout-style");var _polytheneThemeLayoutLayoutStyle2=_interopRequireDefault(_polytheneThemeLayoutLayoutStyle);_polytheneThemeCommonStyler2["default"].add("polythene-style-layout",_polytheneThemeLayoutLayoutStyle2["default"]);

lib/list-tile/list-tile.es6.js

@@ -1,4 +0,6 @@
-'use strict';
+import styler from 'polythene-theme/common/styler';
 
-require('polythene-theme/list-tile/list-tile.css!');
-require('polythene-theme/list-tile/list-tile-color.css!');
+import style from 'polythene-theme/list-tile/list-tile-style';
+import color from 'polythene-theme/list-tile/list-tile-style-color';
+
+styler.add('polythene-style-list-tile', style, color);

lib/list-tile/list-tile.js

@@ -1,1 +0,1 @@
-"use strict";require("polythene-theme/list-tile/list-tile.css!");require("polythene-theme/list-tile/list-tile-color.css!");
+"use strict";function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{"default":obj}}var _polytheneThemeCommonStyler=require("polythene-theme/common/styler");var _polytheneThemeCommonStyler2=_interopRequireDefault(_polytheneThemeCommonStyler);var _polytheneThemeListTileListTileStyle=require("polythene-theme/list-tile/list-tile-style");var _polytheneThemeListTileListTileStyle2=_interopRequireDefault(_polytheneThemeListTileListTileStyle);var _polytheneThemeListTileListTileStyleColor=require("polythene-theme/list-tile/list-tile-style-color");var _polytheneThemeListTileListTileStyleColor2=_interopRequireDefault(_polytheneThemeListTileListTileStyleColor);_polytheneThemeCommonStyler2["default"].add("polythene-style-list-tile",_polytheneThemeListTileListTileStyle2["default"],_polytheneThemeListTileListTileStyleColor2["default"]);

lib/list/list.es6.js

@@ -1,4 +0,6 @@
-'use strict';
+import styler from 'polythene-theme/common/styler';
 
-require('polythene-theme/list/list.css!');
-require('polythene-theme/list/list-color.css!');
+import style from 'polythene-theme/list/list-style';
+import color from 'polythene-theme/list/list-style-color';
+
+styler.add('polythene-style-list', style, color);

lib/list/list.js

@@ -1,1 +0,1 @@
-"use strict";require("polythene-theme/list/list.css!");require("polythene-theme/list/list-color.css!");
+"use strict";function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{"default":obj}}var _polytheneThemeCommonStyler=require("polythene-theme/common/styler");var _polytheneThemeCommonStyler2=_interopRequireDefault(_polytheneThemeCommonStyler);var _polytheneThemeListListStyle=require("polythene-theme/list/list-style");var _polytheneThemeListListStyle2=_interopRequireDefault(_polytheneThemeListListStyle);var _polytheneThemeListListStyleColor=require("polythene-theme/list/list-style-color");var _polytheneThemeListListStyleColor2=_interopRequireDefault(_polytheneThemeListListStyleColor);_polytheneThemeCommonStyler2["default"].add("polythene-style-list",_polytheneThemeListListStyle2["default"],_polytheneThemeListListStyleColor2["default"]);

lib/ripple/ripple.es6.js

@@ -1,3 +0,4 @@
-'use strict';
+import styler from 'polythene-theme/common/styler';
+import style from 'polythene-theme/ripple/ripple-style';
 
-require('polythene-theme/ripple/ripple.css!');
+styler.add('polythene-style-ripple', style);

lib/ripple/ripple.js

@@ -1,1 +0,1 @@
-"use strict";require("polythene-theme/ripple/ripple.css!");
+"use strict";function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{"default":obj}}var _polytheneThemeCommonStyler=require("polythene-theme/common/styler");var _polytheneThemeCommonStyler2=_interopRequireDefault(_polytheneThemeCommonStyler);var _polytheneThemeRippleRippleStyle=require("polythene-theme/ripple/ripple-style");var _polytheneThemeRippleRippleStyle2=_interopRequireDefault(_polytheneThemeRippleRippleStyle);_polytheneThemeCommonStyler2["default"].add("polythene-style-ripple",_polytheneThemeRippleRippleStyle2["default"]);

lib/shadow/shadow.es6.js

@@ -1,3 +0,4 @@
-'use strict';
+import styler from 'polythene-theme/common/styler';
+import style from 'polythene-theme/shadow/shadow-style';
 
-require('polythene-theme/shadow/shadow.css!');
+styler.add('polythene-style-shadow', style);

lib/shadow/shadow.js

@@ -1,1 +0,1 @@
-"use strict";require("polythene-theme/shadow/shadow.css!");
+"use strict";function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{"default":obj}}var _polytheneThemeCommonStyler=require("polythene-theme/common/styler");var _polytheneThemeCommonStyler2=_interopRequireDefault(_polytheneThemeCommonStyler);var _polytheneThemeShadowShadowStyle=require("polythene-theme/shadow/shadow-style");var _polytheneThemeShadowShadowStyle2=_interopRequireDefault(_polytheneThemeShadowShadowStyle);_polytheneThemeCommonStyler2["default"].add("polythene-style-shadow",_polytheneThemeShadowShadowStyle2["default"]);

lib/svg/svg.es6.js

@@ -1,1 +0,1 @@
-// This component does not have any styles defined
+// No styles for this component

lib/tabs/tabs.es6.js

@@ -1,4 +0,6 @@
-'use strict';
+import styler from 'polythene-theme/common/styler';
 
-require('polythene-theme/tabs/tabs.css!');
-require('polythene-theme/tabs/tabs-color.css!');
+import style from 'polythene-theme/tabs/tabs-style';
+import color from 'polythene-theme/tabs/tabs-style-color';
+
+styler.add('polythene-style-tabs', style, color);

lib/tabs/tabs.js

@@ -1,1 +0,1 @@
-"use strict";require("polythene-theme/tabs/tabs.css!");require("polythene-theme/tabs/tabs-color.css!");
+"use strict";function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{"default":obj}}var _polytheneThemeCommonStyler=require("polythene-theme/common/styler");var _polytheneThemeCommonStyler2=_interopRequireDefault(_polytheneThemeCommonStyler);var _polytheneThemeTabsTabsStyle=require("polythene-theme/tabs/tabs-style");var _polytheneThemeTabsTabsStyle2=_interopRequireDefault(_polytheneThemeTabsTabsStyle);var _polytheneThemeTabsTabsStyleColor=require("polythene-theme/tabs/tabs-style-color");var _polytheneThemeTabsTabsStyleColor2=_interopRequireDefault(_polytheneThemeTabsTabsStyleColor);_polytheneThemeCommonStyler2["default"].add("polythene-style-tabs",_polytheneThemeTabsTabsStyle2["default"],_polytheneThemeTabsTabsStyleColor2["default"]);

lib/toolbar/toolbar.es6.js

@@ -1,3 +0,4 @@
-'use strict';
+import styler from 'polythene-theme/common/styler';
 
-require('polythene-theme/toolbar/toolbar.css!');
+import style from 'polythene-theme/toolbar/toolbar-style';
+styler.add('polythene-style-toolbar', style);

lib/toolbar/toolbar.js

@@ -1,1 +0,1 @@
-"use strict";require("polythene-theme/toolbar/toolbar.css!");
+"use strict";function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{"default":obj}}var _polytheneThemeCommonStyler=require("polythene-theme/common/styler");var _polytheneThemeCommonStyler2=_interopRequireDefault(_polytheneThemeCommonStyler);var _polytheneThemeToolbarToolbarStyle=require("polythene-theme/toolbar/toolbar-style");var _polytheneThemeToolbarToolbarStyle2=_interopRequireDefault(_polytheneThemeToolbarToolbarStyle);_polytheneThemeCommonStyler2["default"].add("polythene-style-toolbar",_polytheneThemeToolbarToolbarStyle2["default"]);

package.json

 {
   "name": "polythene-theme",
-  "version": "0.1.12",
+  "version": "0.1.13",
   "description": "Polythene default theme",
@@ -8,9 +8,6 @@ "license": "MIT",
   "directories": {},
-  "dependencies": {},
   "devDependencies": {
-    "autoprefixer": "^6.0.3",
     "babel": "^5.8.23",
     "babel-plugin-closure-elimination": "0.0.2",
-    "clean-css": "^3.4.3",
-    "rimraf": "^2.4.3",
+    "jspm": "^0.16.11",
     "transpile-watch": "^0.0.2",
@@ -21,7 +18,7 @@ "uglify-js": "^2.4.24"
     "watch-es6": "node scripts/watch-es6.js watch lib",
-    "watch-css": "node scripts/watch-scss.js watch lib",
-    "watch": "npm run watch-css & npm run watch-es6",
-    "transpile-css": "node scripts/watch-scss.js once lib",
+    "watch-test-es6": "node scripts/watch-es6.js watch test test/jspm_packages",
+    "watch": "npm run watch-es6 & npm run watch-test-es6",
     "transpile-js": "node scripts/watch-es6.js once lib",
-    "transpile": "npm run transpile-css && npm run transpile-js"
+    "transpile-test-js": "node scripts/watch-es6.js once test test/jspm_packages",
+    "transpile": "npm run transpile-js && npm run transpile-test-js"
   },
@@ -42,3 +39,18 @@ "repository": {
   },
-  "homepage": "https://github.com/ArthurClemens/Polythene-theme"
+  "homepage": "https://github.com/ArthurClemens/Polythene-theme",
+  "jspm": {
+    "directories": {
+      "lib": "lib"
+    },
+    "dependencies": {
+      "j2c": "npm:j2c@^0.7.3",
+      "mithril": "npm:mithril@^0.2.0",
+      "polythene": "github:ArthurClemens/Polythene@master"
+    },
+    "devDependencies": {
+      "babel": "npm:babel-core@^5.8.24",
+      "babel-runtime": "npm:babel-runtime@^5.8.24",
+      "core-js": "npm:core-js@^1.1.4"
+    }
+  }
 }

README.md

 # Polythene-theme
 
-Default theme for [Polythene](https://github.com/ArthurClemens/Polythene).
+Default theme for [Polythene](https://github.com/ArthurClemens/Polythene). Version 0.1.13.
+
+## Appearance / Theming
+
+Polythene is an implemenation of Google's Material Design (MD). But foremost it is a component library, and not necessarily tied to MD. Functionality of the components is quite generic, and styles can be swapped out or enhanced.
+
+
+## Theme as component
+
+The theme component defines the styles for the site as well as for all individual components: it is mainly a directory where each component has its subdirectory with style definitions.
+
+By having all styles of all components together, overriding/substituting the default style is relatively efficient. Because unused styles are simply never loaded, it is not necessary to override default styles (hey Bootstrap).
+
+
+## Usage
+
+This section describes the default setup.
+
+### Installation
+
+Requirement:
+
+* [j2c](https://github.com/pygy/j2c)
+
+Get the theme files at:
+
+##### Github
+
+[Polythene-theme](https://github.com/ArthurClemens/Polythene-theme)
+
+##### npm
+
+```
+npm install polythene-theme
+```
+
+##### jspm
+
+```
+jspm install github:ArthurClemens/Polythene-theme
+```
+
+### Configuration
+
+`polythene-theme` is the mapping variable that should point to the theme repository. This is default "path-to-your-polythene-theme". This can be set in your site's config file, for instance with `jspm`:
+
+~~~ javascript
+map {
+    "polythene": "github:ArthurClemens/Polythene@master",
+    "polythene-theme": "github:ArthurClemens/Polythene-theme@master"
+}
+~~~
+
+### Require
+
+Load the theme:
+
+~~~javascript
+// app.js
+require('polythene-theme/theme/theme');
+~~~
+
+
+### Under the hood
+
+The component script file `theme.js` loads site wide styles; by default `layout` (flexbox styles), `font-roboto` and typography styles.
+
+When a Polythene component is loaded, it calls the theme file:
+
+~~~javascript
+// polythene/dialog/dialog.js
+require('polythene-theme/dialog/dialog');
+~~~
+
+This theme file itself does not much more than fetching the style files:
+
+~~~javascript
+// polythene-theme/dialog/dialog.js
+import styler from 'polythene-theme/common/styler';
+import style from 'polythene-theme/dialog/dialog-style';
+import color from 'polythene-theme/dialog/dialog-style-color';
+styler.add('polythene-style-dialog', style, color);
+~~~
+
+These JavaScript styles are converted to CSS styles using [j2c](https://github.com/pygy/j2c).
+
+
+## Theme utils
+
+The "common" directory contains a couple of number of reusable scripts:
+
+* `config`: Comparable to a "variables.scss" sheet, but in JavaScript with a property-color map
+* `mixin`: Style mixins in JavaScript
+* `object.assign`: Polyfill
+* `styler`: Wrapper around j2c to add styles to the head
+* `webfontloader`: See below
+
+
+### Webfont loader
+
+Loads one ore more webfonts (multiple vendors) through Google's webfont loader. This is a simple script; no callback functionality is implemented.
+
+Usage:
+
+~~~javascript
+import webfontLoader from 'polythene-theme/common/webfontLoader';
+webfontLoader.add('google', 'Roboto:400,500,700,400italic:latin');
+webfontLoader.add('google', 'Raleway:400,500,600:latin');
+~~~

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 4 instances in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

239002

increased by141.42%

Dev dependency count

5

decreased by-28.57%

Number of package files

129

increased by25.24%

Lines of code

4029

increased by3403.48%

Number of lines in readme file

112

increased by2700%

Worsened metrics

Number of low quality alerts

52

increased by1633.33%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes