@spectrum-css/button - npm Package Compare versions

Comparing version 14.0.0-next.7 to 14.0.0-s2-foundations.0

dist/metadata.json

 {
   "selectors": [
     ".spectrum-Button",
-    ".spectrum-Button .spectrum-Button-label,\n.spectrum-Button .spectrum-Icon",
+    ".spectrum-Button .spectrum-Button-label",
     ".spectrum-Button .spectrum-Icon",
     ".spectrum-Button .spectrum-Icon + .spectrum-Button-label",
     ".spectrum-Button .spectrum-ProgressCircle",
-    ".spectrum-Button,\n.spectrum-Button.spectrum-Button--accent",
     ".spectrum-Button--sizeL",
+    ".spectrum-Button--sizeM",
     ".spectrum-Button--sizeS",
-    ".spectrum-Button--sizeS.spectrum-Button--iconOnly",
     ".spectrum-Button--sizeXL",
+    ".spectrum-Button--staticBlack",
+    ".spectrum-Button--staticWhite",
     ".spectrum-Button-label",
     ".spectrum-Button-label:empty",
-    ".spectrum-Button.is-disabled,\n.spectrum-Button.is-pending,\n.spectrum-Button:disabled,\n.spectrum-Button[pending]",
-    ".spectrum-Button.is-disabled,\n.spectrum-Button:disabled",
-    ".spectrum-Button.is-focused,\n.spectrum-Button:focus-visible",
-    ".spectrum-Button.is-focused:after,\n.spectrum-Button:focus-visible:after",
-    ".spectrum-Button.is-pending .spectrum-Button-label,\n.spectrum-Button.is-pending .spectrum-Icon,\n.spectrum-Button[pending] .spectrum-Button-label,\n.spectrum-Button[pending] .spectrum-Icon",
-    ".spectrum-Button.is-pending .spectrum-ProgressCircle,\n.spectrum-Button[pending] .spectrum-ProgressCircle",
-    ".spectrum-Button.is-pending,\n.spectrum-Button[pending]",
-    ".spectrum-Button.spectrum-Button--accent .spectrum-Button-label,\n  .spectrum-Button:not(.spectrum-Button--primary):not(.spectrum-Button--negative):not(.spectrum-Button--secondary):not(.spectrum-Button--staticBlack):not(.spectrum-Button--staticWhite) .spectrum-Button-label",
-    ".spectrum-Button.spectrum-Button--accent,\n  .spectrum-Button:not(.spectrum-Button--primary):not(.spectrum-Button--negative):not(.spectrum-Button--secondary):not(.spectrum-Button--staticBlack):not(.spectrum-Button--staticWhite)",
+    ".spectrum-Button.is-disabled",
+    ".spectrum-Button.is-focused:after",
+    ".spectrum-Button.is-pending",
+    ".spectrum-Button.is-pending .spectrum-Button-label",
+    ".spectrum-Button.is-pending .spectrum-Icon",
+    ".spectrum-Button.is-pending .spectrum-ProgressCircle",
+    ".spectrum-Button.is-selected",
+    ".spectrum-Button.is-selected.spectrum-Button--emphasized",
+    ".spectrum-Button.spectrum-Button--accent",
+    ".spectrum-Button.spectrum-Button--accent.spectrum-Button--fill",
+    ".spectrum-Button.spectrum-Button--accent.spectrum-Button--fill .spectrum-Button-label",
+    ".spectrum-Button.spectrum-Button--accent.spectrum-Button--outline",
     ".spectrum-Button.spectrum-Button--iconOnly",
     ".spectrum-Button.spectrum-Button--iconOnly .spectrum-Icon",
+    ".spectrum-Button.spectrum-Button--iconOnly:after",
     ".spectrum-Button.spectrum-Button--negative",
-    ".spectrum-Button.spectrum-Button--outline",
+    ".spectrum-Button.spectrum-Button--negative.spectrum-Button--outline",
     ".spectrum-Button.spectrum-Button--primary",
     ".spectrum-Button.spectrum-Button--primary.spectrum-Button--outline",
+    ".spectrum-Button.spectrum-Button--quiet",
     ".spectrum-Button.spectrum-Button--secondary",
@@ -34,6 +40,9 @@ ".spectrum-Button.spectrum-Button--secondary.spectrum-Button--outline",
     ".spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--outline",
+    ".spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--quiet",
     ".spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--secondary",
     ".spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--secondary.spectrum-Button--outline",
     ".spectrum-Button.spectrum-Button--staticWhite",
+    ".spectrum-Button.spectrum-Button--staticWhite.is-selected",
     ".spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--outline",
+    ".spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--quiet",
     ".spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--secondary",
@@ -44,2 +53,3 @@ ".spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--secondary.spectrum-Button--outline",
     ".spectrum-Button:after",
+    ".spectrum-Button:disabled",
     ".spectrum-Button:focus",
@@ -49,5 +59,11 @@ ".spectrum-Button:focus-visible",
     ".spectrum-Button:hover",
+    ".spectrum-Button[pending]",
+    ".spectrum-Button[pending] .spectrum-Button-label",
+    ".spectrum-Button[pending] .spectrum-Icon",
+    ".spectrum-Button[pending] .spectrum-ProgressCircle",
     "a.spectrum-Button"
   ],
   "mods": [
+    "--mod-animation-duration-100",
+    "--mod-bold-font-weight",
     "--mod-button-animation-duration",
@@ -75,2 +91,3 @@ "--mod-button-background-color-default",
     "--mod-button-edge-to-visual-only",
+    "--mod-button-focus-indicator-gap",
     "--mod-button-focus-ring-border-radius",
@@ -82,3 +99,2 @@ "--mod-button-focus-ring-color",
     "--mod-button-font-size",
-    "--mod-button-font-weight",
     "--mod-button-height",
@@ -92,6 +108,11 @@ "--mod-button-icon-margin-block-start",
     "--mod-button-padding-label-to-icon",
+    "--mod-button-static-content-color",
     "--mod-button-text-align",
     "--mod-button-text-align-with-icon",
     "--mod-button-top-to-icon",
-    "--mod-button-top-to-text"
+    "--mod-button-top-to-text",
+    "--mod-focus-indicator-gap",
+    "--mod-line-height-100",
+    "--mod-sans-font-family-stack",
+    "--mod-static-black-focus-indicator-color"
   ],
@@ -103,2 +124,11 @@ "spectrum": [
     "--spectrum-accent-background-color-key-focus",
+    "--spectrum-accent-color-1000",
+    "--spectrum-accent-color-1100",
+    "--spectrum-accent-color-200",
+    "--spectrum-accent-color-300",
+    "--spectrum-accent-color-900",
+    "--spectrum-accent-content-color-default",
+    "--spectrum-accent-content-color-down",
+    "--spectrum-accent-content-color-hover",
+    "--spectrum-accent-content-color-key-focus",
     "--spectrum-animation-duration-100",
@@ -135,8 +165,7 @@ "--spectrum-black",
     "--spectrum-button-focus-indicator-color",
+    "--spectrum-button-focus-ring-border-radius",
     "--spectrum-button-focus-ring-gap",
     "--spectrum-button-focus-ring-thickness",
     "--spectrum-button-font-size",
-    "--spectrum-button-font-weight",
     "--spectrum-button-height",
-    "--spectrum-button-icon-size-difference",
     "--spectrum-button-intended-icon-size",
@@ -169,5 +198,2 @@ "--spectrum-button-line-height",
     "--spectrum-component-pill-edge-to-visual-only-75",
-    "--spectrum-component-size-difference-down",
-    "--spectrum-component-size-minimum-perspective-down",
-    "--spectrum-component-size-width-ratio-down",
     "--spectrum-component-top-to-workflow-icon-100",
@@ -177,3 +203,3 @@ "--spectrum-component-top-to-workflow-icon-200",
     "--spectrum-component-top-to-workflow-icon-75",
-    "--spectrum-corner-radius-full",
+    "--spectrum-corner-radius-100",
     "--spectrum-disabled-background-color",
@@ -188,5 +214,2 @@ "--spectrum-disabled-border-color",
     "--spectrum-disabled-static-white-content-color",
-    "--spectrum-downstate-height",
-    "--spectrum-downstate-perspective",
-    "--spectrum-downstate-width",
     "--spectrum-focus-indicator-color",
@@ -201,5 +224,6 @@ "--spectrum-focus-indicator-gap",
     "--spectrum-gray-200",
-    "--spectrum-gray-25",
-    "--spectrum-gray-300",
     "--spectrum-gray-400",
+    "--spectrum-gray-50",
+    "--spectrum-gray-500",
+    "--spectrum-gray-600",
     "--spectrum-gray-800",
@@ -213,2 +237,11 @@ "--spectrum-gray-900",
     "--spectrum-negative-background-color-key-focus",
+    "--spectrum-negative-color-1000",
+    "--spectrum-negative-color-1100",
+    "--spectrum-negative-color-200",
+    "--spectrum-negative-color-300",
+    "--spectrum-negative-color-900",
+    "--spectrum-negative-content-color-default",
+    "--spectrum-negative-content-color-down",
+    "--spectrum-negative-content-color-hover",
+    "--spectrum-negative-content-color-key-focus",
     "--spectrum-neutral-background-color-default",
@@ -222,2 +255,6 @@ "--spectrum-neutral-background-color-down",
     "--spectrum-neutral-content-color-key-focus",
+    "--spectrum-neutral-subdued-background-color-default",
+    "--spectrum-neutral-subdued-background-color-down",
+    "--spectrum-neutral-subdued-background-color-hover",
+    "--spectrum-neutral-subdued-background-color-key-focus",
     "--spectrum-progress-circle-thickness-medium",
@@ -231,14 +268,13 @@ "--spectrum-sans-font-family-stack",
     "--spectrum-text-to-visual-75",
-    "--spectrum-transparent-black-100",
     "--spectrum-transparent-black-200",
-    "--spectrum-transparent-black-25",
     "--spectrum-transparent-black-300",
     "--spectrum-transparent-black-400",
+    "--spectrum-transparent-black-500",
+    "--spectrum-transparent-black-600",
     "--spectrum-transparent-black-800",
     "--spectrum-transparent-black-900",
-    "--spectrum-transparent-white-100",
     "--spectrum-transparent-white-200",
-    "--spectrum-transparent-white-25",
     "--spectrum-transparent-white-300",
     "--spectrum-transparent-white-400",
+    "--spectrum-transparent-white-500",
     "--spectrum-transparent-white-800",
@@ -250,2 +286,3 @@ "--spectrum-transparent-white-900",
     "--spectrum-workflow-icon-size-300",
+    "--spectrum-workflow-icon-size-50",
     "--spectrum-workflow-icon-size-75"
@@ -252,0 +289,0 @@ ],

metadata/mods.md

@@ -1,43 +0,50 @@
-| Modifiable custom properties             |
-| ---------------------------------------- |
-| `--mod-button-animation-duration`        |
-| `--mod-button-background-color-default`  |
-| `--mod-button-background-color-disabled` |
-| `--mod-button-background-color-down`     |
-| `--mod-button-background-color-focus`    |
-| `--mod-button-background-color-hover`    |
-| `--mod-button-border-color-default`      |
-| `--mod-button-border-color-disabled`     |
-| `--mod-button-border-color-down`         |
-| `--mod-button-border-color-focus`        |
-| `--mod-button-border-color-hover`        |
-| `--mod-button-border-radius`             |
-| `--mod-button-border-width`              |
-| `--mod-button-bottom-to-text`            |
-| `--mod-button-content-color-default`     |
-| `--mod-button-content-color-disabled`    |
-| `--mod-button-content-color-down`        |
-| `--mod-button-content-color-focus`       |
-| `--mod-button-content-color-hover`       |
-| `--mod-button-edge-to-text`              |
-| `--mod-button-edge-to-visual`            |
-| `--mod-button-edge-to-visual-only`       |
-| `--mod-button-focus-ring-border-radius`  |
-| `--mod-button-focus-ring-color`          |
-| `--mod-button-focus-ring-gap`            |
-| `--mod-button-focus-ring-thickness`      |
-| `--mod-button-font-family`               |
-| `--mod-button-font-size`                 |
-| `--mod-button-font-weight`               |
-| `--mod-button-height`                    |
-| `--mod-button-icon-margin-block-start`   |
-| `--mod-button-line-height`               |
-| `--mod-button-margin-block`              |
-| `--mod-button-margin-left`               |
-| `--mod-button-margin-right`              |
-| `--mod-button-min-width`                 |
-| `--mod-button-padding-label-to-icon`     |
-| `--mod-button-text-align`                |
-| `--mod-button-text-align-with-icon`      |
-| `--mod-button-top-to-icon`               |
-| `--mod-button-top-to-text`               |
+| Modifiable custom properties               |
+| ------------------------------------------ |
+| `--mod-animation-duration-100`             |
+| `--mod-bold-font-weight`                   |
+| `--mod-button-animation-duration`          |
+| `--mod-button-background-color-default`    |
+| `--mod-button-background-color-disabled`   |
+| `--mod-button-background-color-down`       |
+| `--mod-button-background-color-focus`      |
+| `--mod-button-background-color-hover`      |
+| `--mod-button-border-color-default`        |
+| `--mod-button-border-color-disabled`       |
+| `--mod-button-border-color-down`           |
+| `--mod-button-border-color-focus`          |
+| `--mod-button-border-color-hover`          |
+| `--mod-button-border-radius`               |
+| `--mod-button-border-width`                |
+| `--mod-button-bottom-to-text`              |
+| `--mod-button-content-color-default`       |
+| `--mod-button-content-color-disabled`      |
+| `--mod-button-content-color-down`          |
+| `--mod-button-content-color-focus`         |
+| `--mod-button-content-color-hover`         |
+| `--mod-button-edge-to-text`                |
+| `--mod-button-edge-to-visual`              |
+| `--mod-button-edge-to-visual-only`         |
+| `--mod-button-focus-indicator-gap`         |
+| `--mod-button-focus-ring-border-radius`    |
+| `--mod-button-focus-ring-color`            |
+| `--mod-button-focus-ring-gap`              |
+| `--mod-button-focus-ring-thickness`        |
+| `--mod-button-font-family`                 |
+| `--mod-button-font-size`                   |
+| `--mod-button-height`                      |
+| `--mod-button-icon-margin-block-start`     |
+| `--mod-button-line-height`                 |
+| `--mod-button-margin-block`                |
+| `--mod-button-margin-left`                 |
+| `--mod-button-margin-right`                |
+| `--mod-button-min-width`                   |
+| `--mod-button-padding-label-to-icon`       |
+| `--mod-button-static-content-color`        |
+| `--mod-button-text-align`                  |
+| `--mod-button-text-align-with-icon`        |
+| `--mod-button-top-to-icon`                 |
+| `--mod-button-top-to-text`                 |
+| `--mod-focus-indicator-gap`                |
+| `--mod-line-height-100`                    |
+| `--mod-sans-font-family-stack`             |
+| `--mod-static-black-focus-indicator-color` |

package.json

 {
-  "name": "@spectrum-css/button",
-  "version": "14.0.0-next.7",
-  "description": "The Spectrum CSS button component",
-  "license": "Apache-2.0",
-  "author": "Adobe",
-  "homepage": "https://opensource.adobe.com/spectrum-css/button-accent",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/adobe/spectrum-css.git",
-    "directory": "components/button"
-  },
-  "bugs": {
-    "url": "https://github.com/adobe/spectrum-css/issues"
-  },
-  "main": "dist/index.css",
-  "files": [
-    "dist/*",
-    "metadata/mods.md",
-    "stories/template.js"
-  ],
-  "peerDependencies": {
-    "@spectrum-css/icon": ">=7",
-    "@spectrum-css/progresscircle": ">=3",
-    "@spectrum-css/tokens": ">=14.0.0-next.3"
-  },
-  "peerDependenciesMeta": {
-    "@spectrum-css/icon": {
-      "optional": true
-    },
-    "@spectrum-css/progresscircle": {
-      "optional": true
-    }
-  },
-  "devDependencies": {
-    "@spectrum-css/commons": "^9.1.4-next.1"
-  },
-  "keywords": [
-    "adobe",
-    "css",
-    "design system",
-    "spectrum"
-  ],
-  "publishConfig": {
-    "access": "public"
-  }
+	"name": "@spectrum-css/button",
+	"version": "14.0.0-s2-foundations.0",
+	"description": "The Spectrum CSS button component",
+	"license": "Apache-2.0",
+	"author": "Adobe",
+	"homepage": "https://opensource.adobe.com/spectrum-css/button-accent",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/adobe/spectrum-css.git",
+		"directory": "components/button"
+	},
+	"bugs": {
+		"url": "https://github.com/adobe/spectrum-css/issues"
+	},
+	"main": "dist/index.css",
+	"files": [
+		"dist/*",
+		"CHANGELOG.md",
+		"package.json",
+		"stories/template.js",
+		"metadata/mods.md"
+	],
+	"peerDependencies": {
+		"@spectrum-css/icon": ">=7",
+		"@spectrum-css/progresscircle": ">=3",
+		"@spectrum-css/tokens": ">=14"
+	},
+	"peerDependenciesMeta": {
+		"@spectrum-css/icon": {
+			"optional": true
+		},
+		"@spectrum-css/progresscircle": {
+			"optional": true
+		}
+	},
+	"devDependencies": {
+		"@spectrum-css/commons": "workspace:^",
+		"@spectrum-css/icon": "workspace:^",
+		"@spectrum-css/progresscircle": "workspace:^",
+		"@spectrum-css/tokens": "workspace:^"
+	},
+	"keywords": [
+		"spectrum",
+		"css",
+		"design system",
+		"adobe"
+	],
+	"publishConfig": {
+		"access": "public"
+	}
 }

stories/template.js

@@ -46,5 +46,5 @@ import { useArgs } from "@storybook/preview-api";
         [rootClass]: true,
-        [`${rootClass}--${treatment}`]: typeof treatment !== "undefined" && treatment !== "fill",
+        [`${rootClass}--${treatment}`]: typeof treatment !== "undefined",
         [`${rootClass}--${variant}`]: typeof variant !== "undefined",
-        [`${rootClass}--size${size?.toUpperCase()}`]: typeof size !== "undefined" && size !== "m",
+        [`${rootClass}--size${size?.toUpperCase()}`]: typeof size !== "undefined",
         [`${rootClass}--static${capitalize(lowerCase(staticColor))}`]: typeof staticColor !== "undefined",
@@ -51,0 +51,0 @@ [`${rootClass}--iconOnly`]: hideLabel,

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

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

Total package byte prevSize

152367

increased by40.61%

Number of package files

9

increased by12.5%

Worsened metrics

Dev dependency count

4

increased by300%

Lines of code

1722

decreased by-1.82%

No dependency changes