polythene-theme - npm Package Compare versions

Comparing version 0.1.30 to 0.3.0

package.json

 {
-    "name": "polythene-theme",
-    "version": "0.1.30",
-    "description": "Polythene default theme",
-    "license": "MIT",
-    "main": "",
-    "directories": {},
-    "dependencies": {
-        "fastclick": "^1.0.6",
-        "j2c": "^0.7.3"
-    },
-    "devDependencies": {
-        "babel": "^5.8.23",
-        "jspm": "^0.16.11",
-        "transpile-watch": "^0.0.2",
-        "uglify-js": "^2.4.24"
-    },
-    "scripts": {
-        "watch": "node transpile.js watch . node_modules",
-        "transpile": "node transpile.js once . node_modules"
-    },
-    "repository": {
-        "type": "git",
-        "url": "git+https://github.com/ArthurClemens/Polythene-theme.git"
-    },
-    "author": "Arthur Clemens",
-    "licenses": [{
-        "type": "MIT",
-        "url": "http://www.opensource.org/licenses/mit-license.php"
-    }],
-    "bugs": {
-        "url": "https://github.com/ArthurClemens/Polythene-theme/issues"
-    },
-    "homepage": "https://github.com/ArthurClemens/Polythene-theme",
-    "files": [
-        "button",
-        "card",
-        "common",
-        "dialog",
-        "element",
-        "fab",
-        "font-roboto",
-        "header-panel",
-        "icon",
-        "icon-button",
-        "item",
-        "layout",
-        "list",
-        "list-tile",
-        "menu",
-        "notification",
-        "ripple",
-        "shadow",
-        "slider",
-        "snackbar",
-        "svg",
-        "tabs",
-        "theme",
-        "toolbar",
-        "watch-es6.js"
-    ],
-    "jspm": {
-        "dependencies": {
-            "j2c": "npm:j2c@^0.7.3"
-        },
-        "devDependencies": {
-            "babel": "npm:babel-core@^5.8.24",
-            "babel-runtime": "npm:babel-runtime@^5.8.24",
-            "core-js": "npm:core-js@^1.1.4"
-        }
-    }
+  "name": "polythene-theme",
+  "version": "0.3.0",
+  "description": "",
+  "main": "dist/polythene-theme.js",
+  "module": "dist/polythene-theme.mjs",
+  "scripts": {
+    "clean": "rm -rf dist && mkdir dist",
+    "rollup": "../../node_modules/rollup/bin/rollup -c ../../scripts/rollup.umd.js && ../../node_modules/rollup/bin/rollup -c ../../scripts/rollup.es.js",
+    "build": "yarn run rollup"
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "dependencies": {
+    "polythene-motif": "0.3.0"
+  },
+  "author": "Arthur Clemens <[e-mail]> (http://visiblearea.com)",
+  "license": "MIT"
 }

README.md

@@ -1,210 +0,3 @@
-# Polythene-theme
+# Theme
 
-Default theme for [Polythene](https://github.com/ArthurClemens/Polythene).
-
-## 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
-
-You will need:
-
-* [Polythene](https://github.com/ArthurClemens/Polythene) - the core components
-* `Polythene-theme` - (this repository) the default theme
-* [Polythene examples](https://github.com/ArthurClemens/Polythene-examples) - to see implementations of components
-
-
-Requirement:
-
-* [j2c](https://github.com/pygy/j2c)
-
-Get the theme files at:
-
-##### 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).
-
-
-### Customizing
-
-Different styling can be achieved using:
-
-#### Enhancing styles
-
-Extra styles are loaded on top of existing component styles. In  [Polythene-examples](https://github.com/ArthurClemens/Polythene-examples) most pages have some extra styling using the styler utility:
-
-~~~javascript
-import styler from 'polythene-theme/common/styler';
-import style from 'app/card/card-style';
-styler.add('polythene-examples-card', style);
-~~~
-
-Note that no loading order can be guaranteed. Instead use specificity to set precedence of styles.
-
-Of course you can also load extra plain old CSS in the HTML file.
-
-
-#### Replacing styles
-
-Styles are replaced by changing the file path lookup for the module loader.
-
-It cannot be done by writing the theme name in JavaScript like `System.import('theme/component/style')`, because styles are loaded statically using `require` and `import`. This ensures that styles are loaded before the component is drawn to the screen. The downside is that no variable names can be used for these paths.
-
-Most module loaders have a mapping option to change the path lookup. What we want is to change the file lookup from:
-
-`polythene-theme/element/element.js`
-
-to:
-
-`app/custom-theme/element.js`
-
-##### Browserify
-
-In the build script:
-
-~~~javascript
-...
-bundle([
-    'my-main-input-file.js',
-    'app/custom-theme/element'
-], 'my-bundled-output-file.js');
-~~~
-
-##### jspm / SystemJS
-
-In the config file:
-
-~~~javascript
-...
-map: {
-  "polythene-theme/element/element": "app/custom-theme/element",
-  ...
-~~~
-
-
-
-#### Replacing all styles
-
-The same mechanism can be used to change the lookup for `polythene-theme` to something else.
-
-
-
-## 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
-* `no-tap-delay`: Wrapper around Fastclick to handle taps when scrolling
-* `styler`: Wrapper around j2c to add styles to the head
-* `webfontloader`: See below
-
-
-## No tap delay
-
-To remove the tap delay on mobile it is advisable to use a library like [Fastclick](https://github.com/ftlabs/fastclick). But because Fastclick has an unresolved issue with tap events while scrolling on iOS, it is better to use the convenience wrapper provided in the default theme. This temporarily removes the Fastclick event an element is scrolled.
-
-~~~javascript
-import noTapDelay from 'polythene-theme/common/no-tap-delay';
-~~~
-
-
-### Vendor prefixes
-
-`mixin` contains the function `vendorize` to generate vendor prefixes. This is a utility wrapper around the j2c syntax `_o$_ms$_moz$_webkit$: {foo: "bar"}`.
-
-~~~javascript
-import config from 'polythene-theme/common/config';
-import mixin from 'polythene-theme/common/mixin';
-
-const styles = [{
-    ' .dropShadow': [
-        mixin.vendorize({'transition': 'opacity 0.25s'}, config.vendors.transition),
-        mixin.vendorize({'transform': 'translate3d(0,0,0)'}, config.vendors.transform),
-        mixin.vendorize({'box-shadow': 'inset 0px 5px 6px -3px rgba(0, 0, 0, 0.4)'}, config.vendors.box_shadow),
-        {
-            // rest of style
-        }
-    ]
-}];
-~~~
-
-Note the array syntax for mixins.
-
-### 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');
-~~~
+Core Polythene component.

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 1 instance in 1 package

No bug tracker

Maintenance

Package does not have a linked bug tracker in package.json.

Found 1 instance in 1 package

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

No website

Quality

Package does not have a website.

Found 1 instance 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 4 instances in 1 package

Improved metrics

Dependency count

1

decreased by-50%

Dev dependency count

0

decreased by-100%

Number of low quality alerts

3

decreased by-94.83%

Worsened metrics

Total package byte prevSize

3273

decreased by-98.58%

Number of package files

5

decreased by-96.3%

Lines of code

30

decreased by-99.13%

Number of lines in readme file

4

decreased by-98.1%

Number of low supply chain risk alerts

1

increased byInfinity%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedpolythene-motif@0.3.0

• + Addedj2c@1.0.0-4(transitive)

• + Addedj2c-plugin-prefix-browser@1.0.7(transitive)

• + Addedmithril@0.2.5(transitive)

• + Addedpolythene-core@0.3.0(transitive)

• + Addedpolythene-core-css@0.3.0(transitive)

• + Addedpolythene-motif@0.3.0(transitive)

• + Addedpolythene-utilities@0.3.0(transitive)

• + Addedwebfontloader@1.6.28(transitive)

• - Removedfastclick@^1.0.6

• - Removedj2c@^0.7.3

• - Removedfastclick@1.0.6(transitive)

• - Removedj2c@0.7.3(transitive)