@spectrum-css/colorslider
Advanced tools
@spectrum-css/colorslider - npm Package Compare versions
+10
-0
@@ -6,2 +6,12 @@ # Change Log | ||
| <a name="1.0.0"></a> | ||
| # 1.0.0 | ||
| 🗓 2021-02-02 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/colorslider@1.0.0-beta.5...@spectrum-css/colorslider@1.0.0) | ||
| **Note:** Version bump only for package @spectrum-css/colorslider | ||
| <a name="1.0.0-beta.5"></a> | ||
@@ -8,0 +18,0 @@ # 1.0.0-beta.5 |
@@ -10,3 +10,3 @@ <!DOCTYPE html><html class="spectrum spectrum--light spectrum--medium" lang="en-US" dir="ltr"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>Color Slider - Spectrum CSS</title><meta name="viewport" content="user-scalable=no,initial-scale = 1.0,maximum-scale = 1.0"><link rel="stylesheet" type="text/css" href="dependencies/@spectrum-css/vars/spectrum-lightest.css"><link rel="stylesheet" type="text/css" href="dependencies/@spectrum-css/vars/spectrum-light.css"><link rel="stylesheet" type="text/css" href="dependencies/@spectrum-css/vars/spectrum-dark.css"><link rel="stylesheet" type="text/css" href="dependencies/@spectrum-css/vars/spectrum-darkest.css"><link rel="stylesheet" type="text/css" href="dependencies/@spectrum-css/vars/spectrum-medium.css"><link rel="stylesheet" type="text/css" href="dependencies/@spectrum-css/vars/spectrum-large.css"><link rel="stylesheet" type="text/css" href="dependencies/@spectrum-css/colorhandle/index-vars.css"><!-- Include the actual component--><link rel="stylesheet" type="text/css" href="../index-vars.css"><link rel="stylesheet" type="text/css" href="css/site.css"><link rel="stylesheet" type="text/css" href="css/docs.css"><script src="js/loadicons/index.js"></script><script src="js/focus-ring-polyfill/index.js"></script><script src="js/typekit.js"></script><script src="js/SpectrumSwitcher.js"></script><script>loadIcons('dependencies/@spectrum-css/icon/spectrum-css-icons.svg'); | ||
| } | ||
| </style></head><body><article class="spectrum-CSSComponent"><header class="spectrum-CSSComponent-heading"><h1 class="spectrum-CSSComponent-title spectrum-Heading spectrum-Heading--sizeXXXL spectrum-Heading--serif"><a class="spectrum-BigSubtleLink" href="#undefined">Color Slider</a></h1><p class="spectrum-CSSComponent-version spectrum-Body spectrum-Body--sizeS">Version 1.0.0-beta.5</p></header><section class="spectrum-CSSComponent-description spectrum-Body spectrum-Body--sizeL"><ul> | ||
| </style></head><body><article class="spectrum-CSSComponent"><header class="spectrum-CSSComponent-heading"><h1 class="spectrum-CSSComponent-title spectrum-Heading spectrum-Heading--sizeXXXL spectrum-Heading--serif"><a class="spectrum-BigSubtleLink" href="#undefined">Color Slider</a></h1><p class="spectrum-CSSComponent-version spectrum-Body spectrum-Body--sizeS">Version 1.0.0</p></header><section class="spectrum-CSSComponent-description spectrum-Body spectrum-Body--sizeL"><ul> | ||
| <li>Set the value of the ColorHandle component to the selected color</li> | ||
@@ -13,0 +13,0 @@ <li>The <code class="spectrum-Code spectrum-Code--sizeS">.spectrum-ColorHandle</code> should be moved with the <code class="spectrum-Code spectrum-Code--sizeS">transform: translateX(x)</code> style property as the slider is dragged</li> |
+19
-6
@@ -0,1 +1,11 @@ | ||
| .spectrum-ColorSlider { | ||
| --spectrum-colorslider-handle-hitarea-border-radius: 0%; | ||
| --spectrum-colorslider-handle-hitarea-width: var( | ||
| --spectrum-global-dimension-size-300 | ||
| ); | ||
| --spectrum-colorslider-handle-hitarea-height: var( | ||
| --spectrum-global-dimension-size-300 | ||
| ); | ||
| } | ||
| .spectrum-ColorSlider.is-focused .spectrum-ColorSlider-handle { | ||
@@ -27,3 +37,2 @@ width: calc(var(--spectrum-colorhandle-size, var(--spectrum-global-dimension-size-200)) * 2); | ||
| -webkit-user-select: none; | ||
| -moz-user-select: none; | ||
| -ms-user-select: none; | ||
@@ -61,5 +70,5 @@ user-select: none; | ||
| .spectrum-ColorSlider-handle:after { | ||
| border-radius: 0%; | ||
| width: var(--spectrum-global-dimension-size-300); | ||
| height: var(--spectrum-global-dimension-size-300); | ||
| border-radius: var(--spectrum-colorslider-handle-hitarea-border-radius); | ||
| width: var(--spectrum-colorslider-handle-hitarea-width); | ||
| height: var(--spectrum-colorslider-handle-hitarea-height); | ||
| } | ||
@@ -94,2 +103,6 @@ | ||
| .spectrum-ColorSlider { | ||
| --spectrum-colorslider-border-color: var(--spectrum-colorarea-border-color); | ||
| } | ||
| .spectrum-ColorSlider-checkerboard { | ||
@@ -105,3 +118,3 @@ background-color: var(--spectrum-global-color-static-white, rgb(255, 255, 255)); | ||
| .spectrum-ColorSlider-checkerboard:before { | ||
| box-shadow: inset 0 0 0 var(--spectrum-colorslider-border-size, var(--spectrum-alias-border-size-thin)) var(--spectrum-colorarea-border-color); | ||
| box-shadow: inset 0 0 0 var(--spectrum-colorslider-border-size, var(--spectrum-alias-border-size-thin)) var(--spectrum-colorslider-border-color); | ||
| } | ||
@@ -122,3 +135,3 @@ | ||
| @media (forced-colors: active) { | ||
| :root { | ||
| .spectrum-ColorSlider { | ||
| --spectrum-colorslider-border-color-disabled : GrayText; | ||
@@ -125,0 +138,0 @@ --spectrum-colorslider-fill-color-disabled : Canvas; |
+2
-1
@@ -9,6 +9,7 @@ | ||
| --spectrum-colorslider-border-radius: var(--spectrum-alias-border-radius-regular); | ||
| --spectrum-colorarea-border-color: undefined; | ||
| --spectrum-colorslider-border-size: var(--spectrum-alias-border-size-thin); | ||
| --spectrum-colorarea-border-color: undefined; | ||
| --spectrum-colorslider-border-color: undefined; | ||
| --spectrum-colorslider-fill-color-disabled: var(--spectrum-global-color-gray-300); | ||
| --spectrum-colorslider-border-color-disabled: var(--spectrum-global-color-gray-300); | ||
| } |
+1
-1
@@ -1,2 +0,2 @@ | ||
| :root { | ||
| .spectrum-ColorSlider { | ||
| --spectrum-colorslider-handle-hitarea-border-radius: 0%; | ||
@@ -3,0 +3,0 @@ --spectrum-colorslider-handle-hitarea-width: var( |
+5
-5
| { | ||
| "name": "@spectrum-css/colorslider", | ||
| "version": "1.0.0-beta.5", | ||
| "version": "1.0.0", | ||
| "description": "The Spectrum CSS Color Slider component", | ||
@@ -23,5 +23,5 @@ "license": "Apache-2.0", | ||
| "devDependencies": { | ||
| "@spectrum-css/colorhandle": "^1.0.0-beta.4", | ||
| "@spectrum-css/component-builder": "^2.0.0-beta.1", | ||
| "@spectrum-css/vars": "^3.0.0-beta.2", | ||
| "@spectrum-css/colorhandle": "^1.0.0", | ||
| "@spectrum-css/component-builder": "^2.0.0", | ||
| "@spectrum-css/vars": "^3.0.0", | ||
| "gulp": "^4.0.0" | ||
@@ -33,3 +33,3 @@ }, | ||
| "homepage": "https://opensource.adobe.com/spectrum-css/", | ||
| "gitHead": "731aeab0a10355dc274efd19d64a58fe71b2ef87" | ||
| "gitHead": "2182fd81423587146f3fb1c881536734a7dfe1a4" | ||
| } |
+2
-2
@@ -1,2 +0,2 @@ | ||
| :root { | ||
| .spectrum-ColorSlider { | ||
| /* todo: fix this in DNA */ | ||
@@ -40,3 +40,3 @@ --spectrum-colorslider-border-color: var(--spectrum-colorarea-border-color); | ||
| @media (forced-colors: active) { | ||
| :root { | ||
| .spectrum-ColorSlider { | ||
| --spectrum-colorslider-border-color-disabled : GrayText; | ||
@@ -43,0 +43,0 @@ --spectrum-colorslider-fill-color-disabled : Canvas; |
New alerts
Network access
Supply chain riskThis module accesses the network.
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
Uses eval
Supply chain riskPackage uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.
Found 1 instance in 1 package
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
URL strings
Supply chain riskPackage contains fragments of external URLs or IP addresses, which the package may be accessing at runtime.
Found 1 instance in 1 package
Fixed alerts
Network access
Supply chain riskThis module accesses the network.
Found 1 instance in 1 package
Uses eval
Supply chain riskPackage uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.
Found 1 instance in 1 package
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
Found 1 instance in 1 package
URL strings
Supply chain riskPackage contains fragments of external URLs or IP addresses, which the package may be accessing at runtime.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
2518702
0.03%- Lines of code
5244
0.23%- Number of low quality alerts
0
-100%Worsened metrics
- Number of medium supply chain risk alerts
3
50%