@spectrum-web-components/theme - npm Package Compare versions

Comparing version 0.4.1 to 0.4.2-alpha.38

custom-elements.json

@@ -1,1 +0,1 @@
-{"version":"experimental","tags":[{"name":"sp-theme","path":"./src/theme.ts","attributes":[{"name":"color","type":"\"\" | \"light\" | \"lightest\" | \"dark\" | \"darkest\""},{"name":"scale","type":"\"\" | \"medium\" | \"large\""}],"properties":[{"name":"shadowRoot","type":"ShadowRoot"},{"name":"core","type":"\"core\""},{"name":"color","attribute":"color","type":"\"\" | \"light\" | \"lightest\" | \"dark\" | \"darkest\""},{"name":"scale","attribute":"scale","type":"\"\" | \"medium\" | \"large\""}]}]}
+{"version":"experimental","tags":[{"name":"sp-theme","path":"./src/theme.ts","attributes":[{"name":"color","type":"Color"},{"name":"scale","type":"Scale"}],"properties":[{"name":"core","type":"\"core\""},{"name":"color","attribute":"color","type":"Color"},{"name":"scale","attribute":"scale","type":"Scale"}]}]}

package.json

@@ -21,15 +21,42 @@ {
     ],
-    "version": "0.4.1",
+    "version": "0.4.2-alpha.38+3926abb2",
     "description": "",
-    "main": "lib/index.js",
-    "module": "lib/index.js",
+    "main": "src/index.js",
+    "module": "src/index.js",
     "type": "module",
+    "exports": {
+        "./src/": "./src/",
+        "./custom-elements.json": "./custom-elements.json",
+        "./package.json": "./package.json",
+        "./sp-theme": "./sp-theme.js",
+        "./sp-theme.js": "./sp-theme.js",
+        "./scale-medium": "./scale-medium.js",
+        "./scale-medium.js": "./scale-medium.js",
+        "./scale-large": "./scale-large.js",
+        "./scale-large.js": "./scale-large.js",
+        "./theme-lighest": "./theme-lighest.js",
+        "./theme-lighest.js": "./theme-lighest.js",
+        "./theme-light": "./theme-light.js",
+        "./theme-light.js": "./theme-light.js",
+        "./theme-dark": "./theme-dark.js",
+        "./theme-dark.js": "./theme-dark.js",
+        "./theme-darkest": "./theme-darkest.js",
+        "./theme-darkest.js": "./theme-darkest.js"
+    },
     "files": [
         "custom-elements.json",
-        "/lib/",
+        "*.d.ts",
+        "*.js",
+        "*.js.map",
         "/src/"
     ],
     "sideEffects": [
-        "./lib/*.js",
-        "./src/*.ts"
+        "./sp-theme.js",
+        "./sp-theme.ts",
+        "./theme-*.js",
+        "./theme-*.ts",
+        "./scale-*.js",
+        "./scale-*.ts",
+        "./src/themes.js",
+        "./src/themes.ts"
     ],
@@ -41,11 +68,9 @@ "scripts": {
     "license": "ISC",
-    "peerDependencies": {
+    "dependencies": {
+        "@spectrum-web-components/styles": "^0.5.4-alpha.38+3926abb2",
         "lit-element": "^2.1.0",
-        "lit-html": "^1.0.0"
-    },
-    "dependencies": {
-        "@spectrum-web-components/styles": "^0.5.3",
+        "lit-html": "^1.0.0",
         "tslib": "^2.0.0"
     },
-    "gitHead": "16b57d15356859cee73278cdf796274e3245320b"
+    "gitHead": "3926abb2769a9bab28762bf3b3e1fab7c5f03589"
 }

README.md

@@ -5,3 +5,3 @@ ## Description
 
-### Installation
+### Usage
 
@@ -12,13 +12,43 @@ [![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/theme?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/theme)
 ```
-npm install @spectrum-web-components/theme
+yarn add @spectrum-web-components/theme
+```
 
-# or
+Import the side effectful registration of `<sp-theme>` via:
 
-yarn add @spectrum-web-components/theme
 ```
+import '@spectrum-web-components/theme/sp-theme.js';
+```
 
+When looking to leverage the `Theme` base class as a type and/or for extension purposes, do so via:
+
+```
+import { Theme } from '@spectrum-web-components/theme';
+```
+
+The various themes can be imported en masse:
+
+```
+import '@spectrum-web-components/theme/src/themes.js';
+```
+
+Or, individually:
+
+```
+import '@spectrum-web-components/theme/theme-darkest.js';
+import '@spectrum-web-components/theme/theme-dark.js';
+import '@spectrum-web-components/theme/theme-light.js';
+import '@spectrum-web-components/theme/theme-lightest.js';
+import '@spectrum-web-components/theme/scale-medium.js';
+import '@spectrum-web-components/theme/scale-large.js';
+```
+
 ## Quick start
 
-The default import of this packages `import '@spectrum-web-components/themes';` will get you started using the `<sp-theme>` wrapper element, and includes all four (4) color options (`lightest`, `light`, `dark`, and `darkest`) and both (2) scale options (`medium` and `large`). Having all of these options available together is the easiest way to get a handle on the theming possibilities offered by the package and empower you to prototype and test various deliveries of your application. However, reserving the download and parse time for all of the variants may not be required for all applications. See "Advanced usage" below for instructions on tuning the performance of an application that leverages this package.
+```
+import '@spectrum-web-components/theme/sp-theme.js';
+import '@spectrum-web-components/theme/src/themes.js';
+```
 
+The above import will get you started using the `<sp-theme>` wrapper element, and includes all four (4) color options (`lightest`, `light`, `dark`, and `darkest`) and both (2) scale options (`medium` and `large`). Having all of these options available together is the easiest way to get a handle on the theming possibilities offered by the package and empower you to prototype and test various deliveries of your application. However, reserving the download and parse time for all of the variants may not be required for all applications. See "Advanced usage" below for instructions on tuning the performance of an application that leverages this package.
+
 ## Advanced usage
@@ -30,6 +60,6 @@
 // Power a site using <sp-theme color="darkest" scale="large">
-import '@spectrum-web-components/theme/lib/theme-darkest.js';
-import '@spectrum-web-components/theme/lib/scale-large.js';
+import '@spectrum-web-components/theme/theme-darkest.js';
+import '@spectrum-web-components/theme/scale-large.js';
 
-import '@spectrum-web-components/theme/lib/theme.js';
+import '@spectrum-web-components/theme/sp-theme.js';
 ```
@@ -44,4 +74,4 @@
     Promise.all([
-        import(`@spectrum-web-components/theme/lib/theme-${color}.js`),
-        import(`@spectrum-web-components/theme/lib/scale-${scale}.js`),
+        import(`@spectrum-web-components/theme/theme-${color}.js`),
+        import(`@spectrum-web-components/theme/scale-${scale}.js`),
     ]).then(() => {
@@ -132,3 +162,3 @@ themeElement.color = color;
 
-The large scale of **sp-theme** will switch to using Spectrum's larger mobile [Platform Scale](https://spectrum.adobe.com/page/platform-scale/)
+The large scale of `<sp-theme>` will switch to using Spectrum's larger mobile [Platform Scale](https://spectrum.adobe.com/page/platform-scale/)
 
@@ -135,0 +165,0 @@ ```html demo

src/index.ts

@@ -12,9 +12,2 @@ /*
 */
-export * from './theme.js';
-
-import './theme-light.js';
-import './theme-lightest.js';
-import './theme-dark.js';
-import './theme-darkest.js';
-import './scale-medium.js';
-import './scale-large.js';
+export * from './Theme.js';

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

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

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

Improved metrics

Number of lines in readme file

259

increased by13.1%

Worsened metrics

Total package byte prevSize

864817

decreased by-11.75%

Number of package files

78

decreased by-7.14%

Lines of code

3015

decreased by-16.25%

Number of medium supply chain risk alerts

2

increased byInfinity%

Dependency changes

• + Addedlit-element@^2.1.0

• + Addedlit-html@^1.0.0

• + Added@spectrum-web-components/styles@0.5.4-alpha.38(transitive)

• - Removed@spectrum-web-components/styles@0.5.3(transitive)

• Updated@spectrum-web-components/styles@^0.5.4-alpha.38+3926abb2