Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@spectrum-web-components/color-loupe
Advanced tools
@spectrum-web-components/color-loupe - npm Package Compare versions
Comparing version 0.1.0-alpha.1407 to 0.1.0
@@ -21,3 +21,3 @@ { | ||
| ], | ||
| "version": "0.1.0-alpha.1407+47b96fc6", | ||
| "version": "0.1.0", | ||
| "description": "", | ||
@@ -28,3 +28,3 @@ "main": "src/index.js", | ||
| "exports": { | ||
| "./src/": "./src/", | ||
| "./src/": "./src/index.js", | ||
| "./custom-elements.json": "./custom-elements.json", | ||
@@ -52,9 +52,9 @@ "./package.json": "./package.json", | ||
| "devDependencies": { | ||
| "@spectrum-css/colorloupe": "^1.0.0-beta.3" | ||
| "@spectrum-css/colorloupe": "^1.0.0" | ||
| }, | ||
| "dependencies": { | ||
| "@spectrum-web-components/base": "^0.2.0-alpha.40+47b96fc6", | ||
| "@spectrum-web-components/base": "^0.4.1", | ||
| "tslib": "^2.0.0" | ||
| }, | ||
| "gitHead": "47b96fc63e9b1cee03ba44793cfcd930488a7a17" | ||
| "gitHead": "b7f12041404bffdd65b1472f22b6f3eacbf7157c" | ||
| } |
| ## Description | ||
| An `<sp-color-loupe>` shows the output color that would otherwise be covered by a cursor, stylus, or finger during color selection. | ||
| ### Usage | ||
@@ -27,3 +29,3 @@ | ||
| ```html | ||
| <sp-color-loupe></sp-color-loupe> | ||
| <sp-color-loupe open style="position: relative"></sp-color-loupe> | ||
| ``` |
@@ -14,11 +14,9 @@ /* | ||
| const styles = css ` | ||
| :host{width:calc(var(--spectrum-colorloupe-width, | ||
| :host{--spectrum-colorloupe-width-adjusted:calc(var(--spectrum-colorloupe-width, | ||
| var(--spectrum-global-dimension-static-size-600)) + var(--spectrum-colorhandle-inner-border-size, | ||
| var(--spectrum-global-dimension-static-size-25))*2);height:calc(var(--spectrum-colorloupe-height, | ||
| var(--spectrum-global-dimension-static-size-25))*2);--spectrum-colorloupe-height-adjusted:calc(var(--spectrum-colorloupe-height, | ||
| var(--spectrum-global-dimension-static-size-800)) + var(--spectrum-colorhandle-inner-border-size, | ||
| var(--spectrum-global-dimension-static-size-25))*2);position:absolute;transform:translateY(var(--spectrum-global-dimension-static-size-100,8px));opacity:0;transform-origin:bottom center;bottom:calc(50% + var(--spectrum-global-dimension-static-size-200, 16px));left:calc(50% - (var(--spectrum-colorloupe-width, | ||
| var(--spectrum-global-dimension-static-size-600)) + var(--spectrum-colorhandle-inner-border-size, | ||
| var(--spectrum-global-dimension-static-size-25))*2)/2);transition:transform .1s ease-in-out,opacity 125ms ease-in-out;pointer-events:none}:host([open]){transform:translate(0);opacity:1}.outer{stroke-width:var(--spectrum-colorloupe-outer-border-size,var(--spectrum-global-dimension-static-size-10));fill:var(--spectrum-colorloupe-inner-border-color,var(--spectrum-global-color-static-white));stroke:var(--spectrum-colorloupe-outer-border-color,rgba(50,50,50,.1))}svg{width:inherit;height:inherit} | ||
| var(--spectrum-global-dimension-static-size-25))*2);--spectrum-colorloupe-offset:var(--spectrum-global-dimension-static-size-200,16px);--spectrum-colorloupe-animation-distance:var(--spectrum-global-dimension-static-size-100,8px);width:var(--spectrum-colorloupe-width-adjusted);height:var(--spectrum-colorloupe-height-adjusted);position:absolute;transform:translateY(var(--spectrum-colorloupe-animation-distance));opacity:0;transform-origin:bottom center;bottom:calc(50% + var(--spectrum-colorloupe-offset));left:calc(50% - var(--spectrum-colorloupe-width-adjusted)/2);transition:transform .1s ease-in-out,opacity 125ms ease-in-out;pointer-events:none}:host([open]){transform:translate(0);opacity:1}.outer{stroke-width:var(--spectrum-colorloupe-outer-border-size,var(--spectrum-global-dimension-static-size-10));fill:var(--spectrum-colorloupe-inner-border-color,var(--spectrum-global-color-static-white));stroke:var(--spectrum-colorloupe-outer-border-color,rgba(50,50,50,.1))}@media (forced-colors:active){:host{--spectrum-colorloupe-outer-border-color:CanvasText}}svg{width:inherit;height:inherit} | ||
| `; | ||
| export default styles; | ||
| //# sourceMappingURL=color-loupe.css.js.map |
@@ -14,10 +14,8 @@ /* | ||
| const styles = css` | ||
| :host{width:calc(var(--spectrum-colorloupe-width, | ||
| :host{--spectrum-colorloupe-width-adjusted:calc(var(--spectrum-colorloupe-width, | ||
| var(--spectrum-global-dimension-static-size-600)) + var(--spectrum-colorhandle-inner-border-size, | ||
| var(--spectrum-global-dimension-static-size-25))*2);height:calc(var(--spectrum-colorloupe-height, | ||
| var(--spectrum-global-dimension-static-size-25))*2);--spectrum-colorloupe-height-adjusted:calc(var(--spectrum-colorloupe-height, | ||
| var(--spectrum-global-dimension-static-size-800)) + var(--spectrum-colorhandle-inner-border-size, | ||
| var(--spectrum-global-dimension-static-size-25))*2);position:absolute;transform:translateY(var(--spectrum-global-dimension-static-size-100,8px));opacity:0;transform-origin:bottom center;bottom:calc(50% + var(--spectrum-global-dimension-static-size-200, 16px));left:calc(50% - (var(--spectrum-colorloupe-width, | ||
| var(--spectrum-global-dimension-static-size-600)) + var(--spectrum-colorhandle-inner-border-size, | ||
| var(--spectrum-global-dimension-static-size-25))*2)/2);transition:transform .1s ease-in-out,opacity 125ms ease-in-out;pointer-events:none}:host([open]){transform:translate(0);opacity:1}.outer{stroke-width:var(--spectrum-colorloupe-outer-border-size,var(--spectrum-global-dimension-static-size-10));fill:var(--spectrum-colorloupe-inner-border-color,var(--spectrum-global-color-static-white));stroke:var(--spectrum-colorloupe-outer-border-color,rgba(50,50,50,.1))}svg{width:inherit;height:inherit} | ||
| var(--spectrum-global-dimension-static-size-25))*2);--spectrum-colorloupe-offset:var(--spectrum-global-dimension-static-size-200,16px);--spectrum-colorloupe-animation-distance:var(--spectrum-global-dimension-static-size-100,8px);width:var(--spectrum-colorloupe-width-adjusted);height:var(--spectrum-colorloupe-height-adjusted);position:absolute;transform:translateY(var(--spectrum-colorloupe-animation-distance));opacity:0;transform-origin:bottom center;bottom:calc(50% + var(--spectrum-colorloupe-offset));left:calc(50% - var(--spectrum-colorloupe-width-adjusted)/2);transition:transform .1s ease-in-out,opacity 125ms ease-in-out;pointer-events:none}:host([open]){transform:translate(0);opacity:1}.outer{stroke-width:var(--spectrum-colorloupe-outer-border-size,var(--spectrum-global-dimension-static-size-10));fill:var(--spectrum-colorloupe-inner-border-color,var(--spectrum-global-color-static-white));stroke:var(--spectrum-colorloupe-outer-border-color,rgba(50,50,50,.1))}@media (forced-colors:active){:host{--spectrum-colorloupe-outer-border-color:CanvasText}}svg{width:inherit;height:inherit} | ||
| `; | ||
| export default styles; |
@@ -14,11 +14,9 @@ /* | ||
| const styles = css ` | ||
| :host{width:calc(var(--spectrum-colorloupe-width, | ||
| :host{--spectrum-colorloupe-width-adjusted:calc(var(--spectrum-colorloupe-width, | ||
| var(--spectrum-global-dimension-static-size-600)) + var(--spectrum-colorhandle-inner-border-size, | ||
| var(--spectrum-global-dimension-static-size-25))*2);height:calc(var(--spectrum-colorloupe-height, | ||
| var(--spectrum-global-dimension-static-size-25))*2);--spectrum-colorloupe-height-adjusted:calc(var(--spectrum-colorloupe-height, | ||
| var(--spectrum-global-dimension-static-size-800)) + var(--spectrum-colorhandle-inner-border-size, | ||
| var(--spectrum-global-dimension-static-size-25))*2);position:absolute;transform:translateY(var(--spectrum-global-dimension-static-size-100,8px));opacity:0;transform-origin:bottom center;bottom:calc(50% + var(--spectrum-global-dimension-static-size-200, 16px));left:calc(50% - (var(--spectrum-colorloupe-width, | ||
| var(--spectrum-global-dimension-static-size-600)) + var(--spectrum-colorhandle-inner-border-size, | ||
| var(--spectrum-global-dimension-static-size-25))*2)/2);transition:transform .1s ease-in-out,opacity 125ms ease-in-out;pointer-events:none}:host([open]){transform:translate(0);opacity:1}.outer{stroke-width:var(--spectrum-colorloupe-outer-border-size,var(--spectrum-global-dimension-static-size-10));fill:var(--spectrum-colorloupe-inner-border-color,var(--spectrum-global-color-static-white));stroke:var(--spectrum-colorloupe-outer-border-color,rgba(50,50,50,.1))} | ||
| var(--spectrum-global-dimension-static-size-25))*2);--spectrum-colorloupe-offset:var(--spectrum-global-dimension-static-size-200,16px);--spectrum-colorloupe-animation-distance:var(--spectrum-global-dimension-static-size-100,8px);width:var(--spectrum-colorloupe-width-adjusted);height:var(--spectrum-colorloupe-height-adjusted);position:absolute;transform:translateY(var(--spectrum-colorloupe-animation-distance));opacity:0;transform-origin:bottom center;bottom:calc(50% + var(--spectrum-colorloupe-offset));left:calc(50% - var(--spectrum-colorloupe-width-adjusted)/2);transition:transform .1s ease-in-out,opacity 125ms ease-in-out;pointer-events:none}:host([open]){transform:translate(0);opacity:1}.outer{stroke-width:var(--spectrum-colorloupe-outer-border-size,var(--spectrum-global-dimension-static-size-10));fill:var(--spectrum-colorloupe-inner-border-color,var(--spectrum-global-color-static-white));stroke:var(--spectrum-colorloupe-outer-border-color,rgba(50,50,50,.1))}@media (forced-colors:active){:host{--spectrum-colorloupe-outer-border-color:CanvasText}} | ||
| `; | ||
| export default styles; | ||
| //# sourceMappingURL=spectrum-color-loupe.css.js.map |
@@ -14,10 +14,8 @@ /* | ||
| const styles = css` | ||
| :host{width:calc(var(--spectrum-colorloupe-width, | ||
| :host{--spectrum-colorloupe-width-adjusted:calc(var(--spectrum-colorloupe-width, | ||
| var(--spectrum-global-dimension-static-size-600)) + var(--spectrum-colorhandle-inner-border-size, | ||
| var(--spectrum-global-dimension-static-size-25))*2);height:calc(var(--spectrum-colorloupe-height, | ||
| var(--spectrum-global-dimension-static-size-25))*2);--spectrum-colorloupe-height-adjusted:calc(var(--spectrum-colorloupe-height, | ||
| var(--spectrum-global-dimension-static-size-800)) + var(--spectrum-colorhandle-inner-border-size, | ||
| var(--spectrum-global-dimension-static-size-25))*2);position:absolute;transform:translateY(var(--spectrum-global-dimension-static-size-100,8px));opacity:0;transform-origin:bottom center;bottom:calc(50% + var(--spectrum-global-dimension-static-size-200, 16px));left:calc(50% - (var(--spectrum-colorloupe-width, | ||
| var(--spectrum-global-dimension-static-size-600)) + var(--spectrum-colorhandle-inner-border-size, | ||
| var(--spectrum-global-dimension-static-size-25))*2)/2);transition:transform .1s ease-in-out,opacity 125ms ease-in-out;pointer-events:none}:host([open]){transform:translate(0);opacity:1}.outer{stroke-width:var(--spectrum-colorloupe-outer-border-size,var(--spectrum-global-dimension-static-size-10));fill:var(--spectrum-colorloupe-inner-border-color,var(--spectrum-global-color-static-white));stroke:var(--spectrum-colorloupe-outer-border-color,rgba(50,50,50,.1))} | ||
| var(--spectrum-global-dimension-static-size-25))*2);--spectrum-colorloupe-offset:var(--spectrum-global-dimension-static-size-200,16px);--spectrum-colorloupe-animation-distance:var(--spectrum-global-dimension-static-size-100,8px);width:var(--spectrum-colorloupe-width-adjusted);height:var(--spectrum-colorloupe-height-adjusted);position:absolute;transform:translateY(var(--spectrum-colorloupe-animation-distance));opacity:0;transform-origin:bottom center;bottom:calc(50% + var(--spectrum-colorloupe-offset));left:calc(50% - var(--spectrum-colorloupe-width-adjusted)/2);transition:transform .1s ease-in-out,opacity 125ms ease-in-out;pointer-events:none}:host([open]){transform:translate(0);opacity:1}.outer{stroke-width:var(--spectrum-colorloupe-outer-border-size,var(--spectrum-global-dimension-static-size-10));fill:var(--spectrum-colorloupe-inner-border-color,var(--spectrum-global-color-static-white));stroke:var(--spectrum-colorloupe-outer-border-color,rgba(50,50,50,.1))}@media (forced-colors:active){:host{--spectrum-colorloupe-outer-border-color:CanvasText}} | ||
| `; | ||
| export default styles; |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
New author
Supply chain riskA new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Manifest confusion
Supply chain riskThis package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by5.32%
45392
- Number of package files
- increased by3.7%
28
- Lines of code
- increased by0.24%
419
- Number of lines in readme file
- increased by6.9%
31
Dependency changes
+ Added@spectrum-web-components/base@0.4.6(transitive)
- Removed@spectrum-web-components/base@0.2.00.3.3(transitive)
- Removed@spectrum-web-components/styles@0.8.1(transitive)
- Removed@spectrum-web-components/theme@0.7.4(transitive)