@spark-web/button 5.4.0 → 5.5.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @spark-web/button
 
+## 5.5.0
+
+### Minor Changes
+
+- [#659](https://github.com/brighte-labs/spark-web/pull/659)
+  [`6b8615a`](https://github.com/brighte-labs/spark-web/commit/6b8615a0e63d51a6757fd569bf21798a3bceaeea)
+  Thanks [@mkt-brighte](https://github.com/mkt-brighte)! - Added dark tone for
+  button component and add dark tokens
+
+### Patch Changes
+
+- Updated dependencies
+  [[`6b8615a`](https://github.com/brighte-labs/spark-web/commit/6b8615a0e63d51a6757fd569bf21798a3bceaeea)]:
+  - @spark-web/a11y@5.2.0
+  - @spark-web/theme@5.11.1
+
 ## 5.4.0
 
 ### Minor Changes

package/dist/declarations/src/button-link.d.ts

@@ -5,5 +5,5 @@ export declare type ButtonLinkProps = LinkComponentProps & CommonButtonProps;
 /** The appearance of a `Button`, with the semantics of a link. */
 export declare const ButtonLink: <Comp extends import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> = "a">(props: {
     as?: Comp | undefined;
-    ref?: import("react").Ref<Comp extends "symbol" | "text" | "switch" | "clipPath" | "filter" | "mask" | "marker" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "set" | "stop" | "textPath" | "tspan" | "use" | "view" | keyof HTMLElementTagNameMap ? (HTMLElementTagNameMap & Pick<SVGElementTagNameMap, "symbol" | "text" | "switch" | "clipPath" | "filter" | "mask" | "marker" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "set" | "stop" | "textPath" | "tspan" | "use" | "view">)[Comp] : Comp extends new (...args: any) => any ? InstanceType<Comp> : undefined> | undefined;
+    ref?: import("react").Ref<Comp extends "symbol" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "set" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | keyof HTMLElementTagNameMap ? (HTMLElementTagNameMap & Pick<SVGElementTagNameMap, "symbol" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "set" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view">)[Comp] : Comp extends new (...args: any) => any ? InstanceType<Comp> : undefined> | undefined;
 } & Omit<import("react").PropsWithoutRef<import("react").ComponentProps<Comp>>, "as"> & ButtonLinkProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;

package/dist/declarations/src/use-button-styles.d.ts

@@ -93,7 +93,7 @@ export declare function useButtonStyles({ iconOnly, prominence, rounded, size, t
     readonly transitionTimingFunction: string;
     readonly transitionDuration: string;
 }, {
-    readonly fontWeight: "medium" | "light" | "bold" | "thin" | "extralight" | "regular" | "semibold" | "extrabold" | "black" | undefined;
+    readonly fontWeight: "bold" | "medium" | "light" | "thin" | "black" | "extralight" | "regular" | "semibold" | "extrabold" | undefined;
 }];
 export declare type UseButtonStylesProps = Omit<Required<ButtonStyleProps>, 'css' | 'rounded' | 'filled'> & Partial<Pick<ButtonStyleProps, 'rounded' | 'filled'>> & {
     /** Whether the children of the button is a single icon or not. */

package/dist/spark-web-button.cjs.dev.js

@@ -122,6 +122,11 @@ var variants = {
       background: 'primaryDark',
       backgroundHover: 'primaryHover',
       backgroundActive: 'primaryActive'
+    }, highDisabledStyles),
+    dark: _objectSpread({
+      background: 'dark',
+      backgroundHover: 'darkHover',
+      backgroundActive: 'darkActive'
     }, highDisabledStyles)
   },
   low: {
@@ -186,6 +191,16 @@ var variants = {
       backgroundActive: 'none',
       borderActive: 'primaryActive',
       textToneActive: 'primaryActive'
+    }, lowDisabledAltStyles),
+    dark: _objectSpread({
+      background: 'surface',
+      backgroundHover: 'none',
+      backgroundActive: 'none',
+      textTone: 'dark',
+      borderWidth: 'large',
+      border: 'dark',
+      borderHover: 'darkHover',
+      borderActive: 'darkActive'
     }, lowDisabledAltStyles)
   },
   none: {
@@ -236,6 +251,12 @@ var variants = {
       textTone: 'primaryActive',
       backgroundHover: 'primaryLowHover',
       backgroundActive: 'primaryLowActive'
+    }, noneDisabledStyles),
+    dark: _objectSpread({
+      background: 'surface',
+      textTone: 'dark',
+      backgroundHover: 'darkLowHover',
+      backgroundActive: 'darkLowActive'
     }, noneDisabledStyles)
   }
 };

package/dist/spark-web-button.cjs.prod.js

@@ -122,6 +122,11 @@ var variants = {
       background: 'primaryDark',
       backgroundHover: 'primaryHover',
       backgroundActive: 'primaryActive'
+    }, highDisabledStyles),
+    dark: _objectSpread({
+      background: 'dark',
+      backgroundHover: 'darkHover',
+      backgroundActive: 'darkActive'
     }, highDisabledStyles)
   },
   low: {
@@ -186,6 +191,16 @@ var variants = {
       backgroundActive: 'none',
       borderActive: 'primaryActive',
       textToneActive: 'primaryActive'
+    }, lowDisabledAltStyles),
+    dark: _objectSpread({
+      background: 'surface',
+      backgroundHover: 'none',
+      backgroundActive: 'none',
+      textTone: 'dark',
+      borderWidth: 'large',
+      border: 'dark',
+      borderHover: 'darkHover',
+      borderActive: 'darkActive'
     }, lowDisabledAltStyles)
   },
   none: {
@@ -236,6 +251,12 @@ var variants = {
       textTone: 'primaryActive',
       backgroundHover: 'primaryLowHover',
       backgroundActive: 'primaryLowActive'
+    }, noneDisabledStyles),
+    dark: _objectSpread({
+      background: 'surface',
+      textTone: 'dark',
+      backgroundHover: 'darkLowHover',
+      backgroundActive: 'darkLowActive'
     }, noneDisabledStyles)
   }
 };

package/dist/spark-web-button.esm.js

@@ -118,6 +118,11 @@ var variants = {
       background: 'primaryDark',
       backgroundHover: 'primaryHover',
       backgroundActive: 'primaryActive'
+    }, highDisabledStyles),
+    dark: _objectSpread({
+      background: 'dark',
+      backgroundHover: 'darkHover',
+      backgroundActive: 'darkActive'
     }, highDisabledStyles)
   },
   low: {
@@ -182,6 +187,16 @@ var variants = {
       backgroundActive: 'none',
       borderActive: 'primaryActive',
       textToneActive: 'primaryActive'
+    }, lowDisabledAltStyles),
+    dark: _objectSpread({
+      background: 'surface',
+      backgroundHover: 'none',
+      backgroundActive: 'none',
+      textTone: 'dark',
+      borderWidth: 'large',
+      border: 'dark',
+      borderHover: 'darkHover',
+      borderActive: 'darkActive'
     }, lowDisabledAltStyles)
   },
   none: {
@@ -232,6 +247,12 @@ var variants = {
       textTone: 'primaryActive',
       backgroundHover: 'primaryLowHover',
       backgroundActive: 'primaryLowActive'
+    }, noneDisabledStyles),
+    dark: _objectSpread({
+      background: 'surface',
+      textTone: 'dark',
+      backgroundHover: 'darkLowHover',
+      backgroundActive: 'darkLowActive'
     }, noneDisabledStyles)
   }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spark-web/button",
-  "version": "5.4.0",
+  "version": "5.5.0",
   "homepage": "https://github.com/brighte-labs/spark-web#readme",
   "repository": {
     "type": "git",
@@ -17,13 +17,13 @@
   "dependencies": {
     "@babel/runtime": "^7.25.0",
     "@emotion/react": "^11.14.0",
-    "@spark-web/a11y": "^5.1.0",
+    "@spark-web/a11y": "^5.2.0",
     "@spark-web/box": "^5.0.0",
     "@spark-web/icon": "^5.0.0",
     "@spark-web/link": "^5.0.0",
     "@spark-web/spinner": "^5.0.1",
     "@spark-web/text": "^5.1.0",
-    "@spark-web/theme": "^5.11.0",
+    "@spark-web/theme": "^5.11.1",
     "@spark-web/utils": "^5.0.0"
   },
   "devDependencies": {