Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@spectrum-web-components/clear-button

Package Overview
Dependencies
Maintainers
13
Versions
214
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@spectrum-web-components/clear-button - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1-color-testing

6

package.json
{
"name": "@spectrum-web-components/clear-button",
"version": "1.0.0",
"version": "1.0.1-color-testing",
"publishConfig": {

@@ -46,3 +46,3 @@ "access": "public"

"dependencies": {
"@spectrum-web-components/base": "^1.0.0"
"@spectrum-web-components/base": "^1.0.1-color-testing"
},

@@ -58,3 +58,3 @@ "devDependencies": {

],
"gitHead": "5cf5d34645bf9494ebd20f64c42d1619523d2d84"
"gitHead": "17e14b4a9fa2c8b15df158ea7d77ce09bf50de82"
}
"use strict";
import { css } from "@spectrum-web-components/base";
const styles = css`
:host{block-size:var(--mod-clear-button-height,var(--spectrum-clear-button-height));inline-size:var(--mod-clear-button-width,var(--spectrum-clear-button-width));cursor:pointer;background-color:initial;background-color:var(--mod-clear-button-background-color,transparent);padding:var(--mod-clear-button-padding,var(--spectrum-clear-button-padding));color:var(--mod-clear-button-icon-color,var(--spectrum-clear-button-icon-color));border:none;border-radius:100%;margin:0}.icon{margin-block:0;margin-inline:auto}@media (hover:hover){:host(:hover){color:var(--highcontrast-clear-button-icon-color-hover,var(--mod-clear-button-icon-color-hover,var(--spectrum-clear-button-icon-color-hover)))}:host(:hover) .fill{background-color:var(--mod-clear-button-background-color-hover,var(--spectrum-clear-button-background-color-hover))}}:host(:is(:active,[active])){color:var(--mod-clear-button-icon-color-down,var(--spectrum-clear-button-icon-color-down))}:host(:is(:active,[active])) .fill{background-color:var(--mod-clear-button-background-color-down,var(--spectrum-clear-button-background-color-down))}:host([focus-within]) .js-focus-within,:host(:focus-visible),:host:focus-within,:host([focus-within]) .js-focus-within{color:var(--mod-clear-button-icon-color-key-focus,var(--spectrum-clear-button-icon-color-key-focus))}:host([focus-within]) .js-focus-within .fill,:host(:focus-visible) .fill,:host:focus-within .fill,:host([focus-within]) .js-focus-within .fill{background-color:var(--mod-clear-button-background-color-key-focus,var(--spectrum-clear-button-background-color-key-focus))}:host([disabled]),:host([disabled]){--spectrum-clear-button-icon-color:var(--mod-clear-button-icon-color-disabled,var(--spectrum-disabled-content-color));--spectrum-clear-button-background-color:var(--mod-clear-button-background-color-disabled,transparent)}.fill{background-color:var(--mod-clear-button-background-color,var(--spectrum-clear-button-background-color));inline-size:100%;block-size:100%;border-radius:100%;justify-content:center;align-items:center;display:flex}:host([variant=overBackground]:focus-visible){outline:none}@media (forced-colors:active){:host:not(:disabled){--highcontrast-clear-button-icon-color-hover:Highlight}}:host{--spectrum-clear-button-background-color:var(--system-clear-button-background-color);--spectrum-clear-button-background-color-hover:var(--system-clear-button-background-color-hover);--spectrum-clear-button-background-color-down:var(--system-clear-button-background-color-down);--spectrum-clear-button-background-color-key-focus:var(--system-clear-button-background-color-key-focus);--spectrum-clear-button-height:var(--system-clear-button-height);--spectrum-clear-button-width:var(--system-clear-button-width);--spectrum-clear-button-padding:var(--system-clear-button-padding);--spectrum-clear-button-icon-color:var(--system-clear-button-icon-color);--spectrum-clear-button-icon-color-hover:var(--system-clear-button-icon-color-hover);--spectrum-clear-button-icon-color-down:var(--system-clear-button-icon-color-down);--spectrum-clear-button-icon-color-key-focus:var(--system-clear-button-icon-color-key-focus)}:host([size=s]){--spectrum-clear-button-height:var(--system-clear-button-size-s-height);--spectrum-clear-button-width:var(--system-clear-button-size-s-width)}:host([size=l]){--spectrum-clear-button-height:var(--system-clear-button-size-l-height);--spectrum-clear-button-width:var(--system-clear-button-size-l-width)}:host([size=xl]){--spectrum-clear-button-height:var(--system-clear-button-size-xl-height);--spectrum-clear-button-width:var(--system-clear-button-size-xl-width)}:host .spectrum-ClearButton--quiet{--spectrum-clear-button-background-color:var(--system-clear-button-quiet-background-color);--spectrum-clear-button-background-color-hover:var(--system-clear-button-quiet-background-color-hover);--spectrum-clear-button-background-color-down:var(--system-clear-button-quiet-background-color-down);--spectrum-clear-button-background-color-key-focus:var(--system-clear-button-quiet-background-color-key-focus)}:host([variant=overBackground]){--spectrum-clear-button-icon-color:var(--system-clear-button-over-background-icon-color);--spectrum-clear-button-icon-color-hover:var(--system-clear-button-over-background-icon-color-hover);--spectrum-clear-button-icon-color-down:var(--system-clear-button-over-background-icon-color-down);--spectrum-clear-button-icon-color-key-focus:var(--system-clear-button-over-background-icon-color-key-focus);--spectrum-clear-button-background-color:var(--system-clear-button-over-background-background-color);--spectrum-clear-button-background-color-hover:var(--system-clear-button-over-background-background-color-hover);--spectrum-clear-button-background-color-down:var(--system-clear-button-over-background-background-color-down);--spectrum-clear-button-background-color-key-focus:var(--system-clear-button-over-background-background-color-key-focus)}:host([disabled]),:host([disabled]){--spectrum-clear-button-icon-color:var(--system-clear-button-disabled-icon-color);--spectrum-clear-button-icon-color-hover:var(--system-clear-button-disabled-icon-color-hover);--spectrum-clear-button-icon-color-down:var(--system-clear-button-disabled-icon-color-down);--spectrum-clear-button-background-color:var(--system-clear-button-disabled-background-color)}
:host{block-size:var(--mod-clear-button-height,var(--spectrum-clear-button-height));inline-size:var(--mod-clear-button-width,var(--spectrum-clear-button-width));cursor:pointer;background-color:initial;background-color:var(--mod-clear-button-background-color,transparent);padding:var(--mod-clear-button-padding,var(--spectrum-clear-button-padding));color:var(--mod-clear-button-icon-color,var(--spectrum-clear-button-icon-color));border:none;border-radius:100%;margin:0}.icon{margin-block:0;margin-inline:auto}@media (hover:hover){:host(:hover){color:var(--highcontrast-clear-button-icon-color-hover,var(--mod-clear-button-icon-color-hover,var(--spectrum-clear-button-icon-color-hover)))}:host(:hover) .fill{background-color:var(--mod-clear-button-background-color-hover,var(--spectrum-clear-button-background-color-hover))}}:host(:is(:active,[active])){color:var(--mod-clear-button-icon-color-down,var(--spectrum-clear-button-icon-color-down))}:host(:is(:active,[active])) .fill{background-color:var(--mod-clear-button-background-color-down,var(--spectrum-clear-button-background-color-down))}:host([focus-within]) .js-focus-within,:host(:focus-visible),:host:focus-within,:host([focus-within]) .js-focus-within{color:var(--mod-clear-button-icon-color-key-focus,var(--spectrum-clear-button-icon-color-key-focus))}:host([focus-within]) .js-focus-within .fill,:host(:focus-visible) .fill,:host:focus-within .fill,:host([focus-within]) .js-focus-within .fill{background-color:var(--mod-clear-button-background-color-key-focus,var(--spectrum-clear-button-background-color-key-focus))}:host([disabled]),:host([disabled]){--spectrum-clear-button-icon-color:var(--mod-clear-button-icon-color-disabled,var(--spectrum-disabled-content-color));--spectrum-clear-button-background-color:var(--mod-clear-button-background-color-disabled,transparent)}.fill{background-color:var(--mod-clear-button-background-color,var(--spectrum-clear-button-background-color));inline-size:100%;block-size:100%;border-radius:100%;justify-content:center;align-items:center;display:flex}:host([variant=overBackground]:focus-visible){outline:none}@media (forced-colors:active){:host:not(:disabled){--highcontrast-clear-button-icon-color-hover:Highlight}}:host{--spectrum-clear-button-background-color:var(--system-clear-button-background-color);--spectrum-clear-button-background-color-hover:var(--system-clear-button-background-color-hover);--spectrum-clear-button-background-color-down:var(--system-clear-button-background-color-down);--spectrum-clear-button-background-color-key-focus:var(--system-clear-button-background-color-key-focus);--spectrum-clear-button-height:var(--system-clear-button-height);--spectrum-clear-button-width:var(--system-clear-button-width);--spectrum-clear-button-padding:var(--system-clear-button-padding);--spectrum-clear-button-icon-color:var(--system-clear-button-icon-color);--spectrum-clear-button-icon-color-hover:var(--system-clear-button-icon-color-hover);--spectrum-clear-button-icon-color-down:var(--system-clear-button-icon-color-down);--spectrum-clear-button-icon-color-key-focus:var(--system-clear-button-icon-color-key-focus)}:host([size=s]){--spectrum-clear-button-height:var(--system-clear-button-size-s-height);--spectrum-clear-button-width:var(--system-clear-button-size-s-width)}:host([size=l]){--spectrum-clear-button-height:var(--system-clear-button-size-l-height);--spectrum-clear-button-width:var(--system-clear-button-size-l-width)}:host([size=xl]){--spectrum-clear-button-height:var(--system-clear-button-size-xl-height);--spectrum-clear-button-width:var(--system-clear-button-size-xl-width)}:host .spectrum-ClearButton--quiet{--spectrum-clear-button-background-color:var(--system-clear-button-quiet-background-color);--spectrum-clear-button-background-color-hover:var(--system-clear-button-quiet-background-color-hover);--spectrum-clear-button-background-color-down:var(--system-clear-button-quiet-background-color-down);--spectrum-clear-button-background-color-key-focus:var(--system-clear-button-quiet-background-color-key-focus)}:host([variant=overBackground]){--spectrum-clear-button-icon-color:var(--system-clear-button-over-background-icon-color);--spectrum-clear-button-icon-color-hover:var(--system-clear-button-over-background-icon-color-hover);--spectrum-clear-button-icon-color-down:var(--system-clear-button-over-background-icon-color-down);--spectrum-clear-button-icon-color-key-focus:var(--system-clear-button-over-background-icon-color-key-focus);--spectrum-clear-button-background-color:var(--system-clear-button-over-background-background-color);--spectrum-clear-button-background-color-hover:var(--system-clear-button-over-background-background-color-hover);--spectrum-clear-button-background-color-down:var(--system-clear-button-over-background-background-color-down);--spectrum-clear-button-background-color-key-focus:var(--system-clear-button-over-background-background-color-key-focus)}:host([disabled]),:host([disabled]){--spectrum-clear-button-icon-color:var(--system-clear-button-disabled-icon-color);--spectrum-clear-button-icon-color-hover:var(--system-clear-button-disabled-icon-color-hover);--spectrum-clear-button-icon-color-down:var(--system-clear-button-disabled-icon-color-down);--spectrum-clear-button-background-color:var(--system-clear-button-disabled-background-color)}:host{box-sizing:border-box}
`;
export default styles;
//# sourceMappingURL=clear-button.css.dev.js.map
"use strict";import{css as o}from"@spectrum-web-components/base";const r=o`
:host{block-size:var(--mod-clear-button-height,var(--spectrum-clear-button-height));inline-size:var(--mod-clear-button-width,var(--spectrum-clear-button-width));cursor:pointer;background-color:initial;background-color:var(--mod-clear-button-background-color,transparent);padding:var(--mod-clear-button-padding,var(--spectrum-clear-button-padding));color:var(--mod-clear-button-icon-color,var(--spectrum-clear-button-icon-color));border:none;border-radius:100%;margin:0}.icon{margin-block:0;margin-inline:auto}@media (hover:hover){:host(:hover){color:var(--highcontrast-clear-button-icon-color-hover,var(--mod-clear-button-icon-color-hover,var(--spectrum-clear-button-icon-color-hover)))}:host(:hover) .fill{background-color:var(--mod-clear-button-background-color-hover,var(--spectrum-clear-button-background-color-hover))}}:host(:is(:active,[active])){color:var(--mod-clear-button-icon-color-down,var(--spectrum-clear-button-icon-color-down))}:host(:is(:active,[active])) .fill{background-color:var(--mod-clear-button-background-color-down,var(--spectrum-clear-button-background-color-down))}:host([focus-within]) .js-focus-within,:host(:focus-visible),:host:focus-within,:host([focus-within]) .js-focus-within{color:var(--mod-clear-button-icon-color-key-focus,var(--spectrum-clear-button-icon-color-key-focus))}:host([focus-within]) .js-focus-within .fill,:host(:focus-visible) .fill,:host:focus-within .fill,:host([focus-within]) .js-focus-within .fill{background-color:var(--mod-clear-button-background-color-key-focus,var(--spectrum-clear-button-background-color-key-focus))}:host([disabled]),:host([disabled]){--spectrum-clear-button-icon-color:var(--mod-clear-button-icon-color-disabled,var(--spectrum-disabled-content-color));--spectrum-clear-button-background-color:var(--mod-clear-button-background-color-disabled,transparent)}.fill{background-color:var(--mod-clear-button-background-color,var(--spectrum-clear-button-background-color));inline-size:100%;block-size:100%;border-radius:100%;justify-content:center;align-items:center;display:flex}:host([variant=overBackground]:focus-visible){outline:none}@media (forced-colors:active){:host:not(:disabled){--highcontrast-clear-button-icon-color-hover:Highlight}}:host{--spectrum-clear-button-background-color:var(--system-clear-button-background-color);--spectrum-clear-button-background-color-hover:var(--system-clear-button-background-color-hover);--spectrum-clear-button-background-color-down:var(--system-clear-button-background-color-down);--spectrum-clear-button-background-color-key-focus:var(--system-clear-button-background-color-key-focus);--spectrum-clear-button-height:var(--system-clear-button-height);--spectrum-clear-button-width:var(--system-clear-button-width);--spectrum-clear-button-padding:var(--system-clear-button-padding);--spectrum-clear-button-icon-color:var(--system-clear-button-icon-color);--spectrum-clear-button-icon-color-hover:var(--system-clear-button-icon-color-hover);--spectrum-clear-button-icon-color-down:var(--system-clear-button-icon-color-down);--spectrum-clear-button-icon-color-key-focus:var(--system-clear-button-icon-color-key-focus)}:host([size=s]){--spectrum-clear-button-height:var(--system-clear-button-size-s-height);--spectrum-clear-button-width:var(--system-clear-button-size-s-width)}:host([size=l]){--spectrum-clear-button-height:var(--system-clear-button-size-l-height);--spectrum-clear-button-width:var(--system-clear-button-size-l-width)}:host([size=xl]){--spectrum-clear-button-height:var(--system-clear-button-size-xl-height);--spectrum-clear-button-width:var(--system-clear-button-size-xl-width)}:host .spectrum-ClearButton--quiet{--spectrum-clear-button-background-color:var(--system-clear-button-quiet-background-color);--spectrum-clear-button-background-color-hover:var(--system-clear-button-quiet-background-color-hover);--spectrum-clear-button-background-color-down:var(--system-clear-button-quiet-background-color-down);--spectrum-clear-button-background-color-key-focus:var(--system-clear-button-quiet-background-color-key-focus)}:host([variant=overBackground]){--spectrum-clear-button-icon-color:var(--system-clear-button-over-background-icon-color);--spectrum-clear-button-icon-color-hover:var(--system-clear-button-over-background-icon-color-hover);--spectrum-clear-button-icon-color-down:var(--system-clear-button-over-background-icon-color-down);--spectrum-clear-button-icon-color-key-focus:var(--system-clear-button-over-background-icon-color-key-focus);--spectrum-clear-button-background-color:var(--system-clear-button-over-background-background-color);--spectrum-clear-button-background-color-hover:var(--system-clear-button-over-background-background-color-hover);--spectrum-clear-button-background-color-down:var(--system-clear-button-over-background-background-color-down);--spectrum-clear-button-background-color-key-focus:var(--system-clear-button-over-background-background-color-key-focus)}:host([disabled]),:host([disabled]){--spectrum-clear-button-icon-color:var(--system-clear-button-disabled-icon-color);--spectrum-clear-button-icon-color-hover:var(--system-clear-button-disabled-icon-color-hover);--spectrum-clear-button-icon-color-down:var(--system-clear-button-disabled-icon-color-down);--spectrum-clear-button-background-color:var(--system-clear-button-disabled-background-color)}
:host{block-size:var(--mod-clear-button-height,var(--spectrum-clear-button-height));inline-size:var(--mod-clear-button-width,var(--spectrum-clear-button-width));cursor:pointer;background-color:initial;background-color:var(--mod-clear-button-background-color,transparent);padding:var(--mod-clear-button-padding,var(--spectrum-clear-button-padding));color:var(--mod-clear-button-icon-color,var(--spectrum-clear-button-icon-color));border:none;border-radius:100%;margin:0}.icon{margin-block:0;margin-inline:auto}@media (hover:hover){:host(:hover){color:var(--highcontrast-clear-button-icon-color-hover,var(--mod-clear-button-icon-color-hover,var(--spectrum-clear-button-icon-color-hover)))}:host(:hover) .fill{background-color:var(--mod-clear-button-background-color-hover,var(--spectrum-clear-button-background-color-hover))}}:host(:is(:active,[active])){color:var(--mod-clear-button-icon-color-down,var(--spectrum-clear-button-icon-color-down))}:host(:is(:active,[active])) .fill{background-color:var(--mod-clear-button-background-color-down,var(--spectrum-clear-button-background-color-down))}:host([focus-within]) .js-focus-within,:host(:focus-visible),:host:focus-within,:host([focus-within]) .js-focus-within{color:var(--mod-clear-button-icon-color-key-focus,var(--spectrum-clear-button-icon-color-key-focus))}:host([focus-within]) .js-focus-within .fill,:host(:focus-visible) .fill,:host:focus-within .fill,:host([focus-within]) .js-focus-within .fill{background-color:var(--mod-clear-button-background-color-key-focus,var(--spectrum-clear-button-background-color-key-focus))}:host([disabled]),:host([disabled]){--spectrum-clear-button-icon-color:var(--mod-clear-button-icon-color-disabled,var(--spectrum-disabled-content-color));--spectrum-clear-button-background-color:var(--mod-clear-button-background-color-disabled,transparent)}.fill{background-color:var(--mod-clear-button-background-color,var(--spectrum-clear-button-background-color));inline-size:100%;block-size:100%;border-radius:100%;justify-content:center;align-items:center;display:flex}:host([variant=overBackground]:focus-visible){outline:none}@media (forced-colors:active){:host:not(:disabled){--highcontrast-clear-button-icon-color-hover:Highlight}}:host{--spectrum-clear-button-background-color:var(--system-clear-button-background-color);--spectrum-clear-button-background-color-hover:var(--system-clear-button-background-color-hover);--spectrum-clear-button-background-color-down:var(--system-clear-button-background-color-down);--spectrum-clear-button-background-color-key-focus:var(--system-clear-button-background-color-key-focus);--spectrum-clear-button-height:var(--system-clear-button-height);--spectrum-clear-button-width:var(--system-clear-button-width);--spectrum-clear-button-padding:var(--system-clear-button-padding);--spectrum-clear-button-icon-color:var(--system-clear-button-icon-color);--spectrum-clear-button-icon-color-hover:var(--system-clear-button-icon-color-hover);--spectrum-clear-button-icon-color-down:var(--system-clear-button-icon-color-down);--spectrum-clear-button-icon-color-key-focus:var(--system-clear-button-icon-color-key-focus)}:host([size=s]){--spectrum-clear-button-height:var(--system-clear-button-size-s-height);--spectrum-clear-button-width:var(--system-clear-button-size-s-width)}:host([size=l]){--spectrum-clear-button-height:var(--system-clear-button-size-l-height);--spectrum-clear-button-width:var(--system-clear-button-size-l-width)}:host([size=xl]){--spectrum-clear-button-height:var(--system-clear-button-size-xl-height);--spectrum-clear-button-width:var(--system-clear-button-size-xl-width)}:host .spectrum-ClearButton--quiet{--spectrum-clear-button-background-color:var(--system-clear-button-quiet-background-color);--spectrum-clear-button-background-color-hover:var(--system-clear-button-quiet-background-color-hover);--spectrum-clear-button-background-color-down:var(--system-clear-button-quiet-background-color-down);--spectrum-clear-button-background-color-key-focus:var(--system-clear-button-quiet-background-color-key-focus)}:host([variant=overBackground]){--spectrum-clear-button-icon-color:var(--system-clear-button-over-background-icon-color);--spectrum-clear-button-icon-color-hover:var(--system-clear-button-over-background-icon-color-hover);--spectrum-clear-button-icon-color-down:var(--system-clear-button-over-background-icon-color-down);--spectrum-clear-button-icon-color-key-focus:var(--system-clear-button-over-background-icon-color-key-focus);--spectrum-clear-button-background-color:var(--system-clear-button-over-background-background-color);--spectrum-clear-button-background-color-hover:var(--system-clear-button-over-background-background-color-hover);--spectrum-clear-button-background-color-down:var(--system-clear-button-over-background-background-color-down);--spectrum-clear-button-background-color-key-focus:var(--system-clear-button-over-background-background-color-key-focus)}:host([disabled]),:host([disabled]){--spectrum-clear-button-icon-color:var(--system-clear-button-disabled-icon-color);--spectrum-clear-button-icon-color-hover:var(--system-clear-button-disabled-icon-color-hover);--spectrum-clear-button-icon-color-down:var(--system-clear-button-disabled-icon-color-down);--spectrum-clear-button-background-color:var(--system-clear-button-disabled-background-color)}:host{box-sizing:border-box}
`;export default r;
//# sourceMappingURL=clear-button.css.js.map

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc