@spark-web/button 5.1.0 → 5.2.1

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # @spark-web/button
 
+## 5.2.1
+
+### Patch Changes
+
+- [#574](https://github.com/brighte-labs/spark-web/pull/574)
+  [`e77b91f`](https://github.com/brighte-labs/spark-web/commit/e77b91fcd59e18795c49fcefec29259eb2aec0a6)
+  Thanks [@mkt-brighte](https://github.com/mkt-brighte)! - Move button
+  fontWeight to token
+
+- Updated dependencies
+  [[`e77b91f`](https://github.com/brighte-labs/spark-web/commit/e77b91fcd59e18795c49fcefec29259eb2aec0a6)]:
+  - @spark-web/theme@5.7.2
+
+## 5.2.0
+
+### Minor Changes
+
+- This release covers the following changes:
+
+  - Updates the primary color palette of the Brighte theme
+  - Add new Storybook story for the `rounded` prop for button components
+  - Tweak focus state styling of buttons at Pantheon theme
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @spark-web/theme@5.6.0
+
 ## 5.1.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" | "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;
+    ref?: import("react").Ref<Comp extends "symbol" | "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" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | keyof HTMLElementTagNameMap ? (HTMLElementTagNameMap & Pick<SVGElementTagNameMap, "symbol" | "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" | "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

@@ -52,7 +52,23 @@ export declare function useButtonStyles({ iconOnly, prominence, rounded, size, t
         } | {
             border?: string | undefined;
             outline?: string | undefined;
+            /**
+             * useButtonStyles
+             *
+             * Custom hook for styling buttons and certain links.
+             * Returns a tuple where the first item is an object of props to spread onto the
+             * underlying `Box` component, and the second item is a CSS object that can be
+             * passed to Emotion's `css` function.
+             */
             outlineOffset?: string | undefined;
+            /**
+             * useButtonStyles
+             *
+             * Custom hook for styling buttons and certain links.
+             * Returns a tuple where the first item is an object of props to spread onto the
+             * underlying `Box` component, and the second item is a CSS object that can be
+             * passed to Emotion's `css` function.
+             */
             boxShadow?: string | undefined;
         };
     };
@@ -76,6 +92,8 @@ export declare function useButtonStyles({ iconOnly, prominence, rounded, size, t
     readonly transitionProperty: string;
     readonly transitionTimingFunction: string;
     readonly transitionDuration: string;
+}, {
+    readonly fontWeight: "medium" | "light" | "bold" | "thin" | "extralight" | "regular" | "semibold" | "extrabold" | "black" | undefined;
 }];
 export declare type UseButtonStylesProps = Omit<Required<ButtonStyleProps>, 'css' | 'rounded'> & Partial<Pick<ButtonStyleProps, 'rounded'>> & {
     /** Whether the children of the button is a single icon or not. */

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

@@ -235,7 +235,8 @@ var resolveButtonChildren = function resolveButtonChildren(_ref) {
     isLoading = _ref.isLoading,
     prominence = _ref.prominence,
     size = _ref.size,
-    tone = _ref.tone;
+    tone = _ref.tone,
+    weight = _ref.weight;
   var variant = variants[prominence][tone];
   return react.Children.map(children, function (child) {
     if (typeof child === 'string' || typeof child === 'number') {
@@ -245,7 +246,7 @@ var resolveButtonChildren = function resolveButtonChildren(_ref) {
           as: "span",
           baseline: false,
           overflowStrategy: "nowrap",
-          weight: "semibold",
+          weight: weight !== null && weight !== void 0 ? weight : 'semibold',
           size: mapTokens.fontSize[size],
           tone: variant === null || variant === void 0 ? void 0 : variant.textTone,
           children: child
@@ -293,7 +294,7 @@ function HiddenWhenLoading(_ref2) {
  * passed to Emotion's `css` function.
  */
 function useButtonStyles(_ref) {
-  var _theme$components$but, _theme$components;
+  var _theme$components$but, _theme$components, _theme$components2;
   var iconOnly = _ref.iconOnly,
     prominence = _ref.prominence,
     _ref$rounded = _ref.rounded,
@@ -364,7 +365,9 @@ function useButtonStyles(_ref) {
       },
       ':focus': disabledFocusRingStyles
     }
-  })];
+  }), {
+    fontWeight: (_theme$components2 = theme$1.components) === null || _theme$components2 === void 0 || (_theme$components2 = _theme$components2.buttons) === null || _theme$components2 === void 0 ? void 0 : _theme$components2.fontWeight
+  }];
 }
 
 var _excluded$1 = ["aria-controls", "aria-describedby", "aria-expanded", "aria-label", "data", "disabled", "id", "loading", "onClick", "css", "rounded", "prominence", "size", "tone", "type"];
@@ -402,9 +405,10 @@ var Button = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
       tone: tone,
       prominence: prominence
     }),
-    _useButtonStyles2 = _slicedToArray(_useButtonStyles, 2),
+    _useButtonStyles2 = _slicedToArray(_useButtonStyles, 3),
     boxProps = _useButtonStyles2[0],
-    buttonStyles = _useButtonStyles2[1];
+    buttonStyles = _useButtonStyles2[1],
+    fontWeight = _useButtonStyles2[2].fontWeight;
   var variant = variants[prominence][tone];
   return jsxRuntime.jsxs(BaseButton, _objectSpread(_objectSpread({}, boxProps), {}, {
     "aria-controls": ariaControls,
@@ -422,7 +426,8 @@ var Button = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
       isLoading: loading,
       prominence: prominence,
       size: size,
-      tone: tone
+      tone: tone,
+      weight: fontWeight
     })), loading && jsxRuntime.jsx(Loading, {
       tone: variant === null || variant === void 0 ? void 0 : variant.textTone
     })]
@@ -476,9 +481,10 @@ var ButtonLink = ts.forwardRefWithAs(function (_ref, forwardedRef) {
       size: size,
       tone: tone
     }),
-    _useButtonStyles2 = _slicedToArray(_useButtonStyles, 2),
+    _useButtonStyles2 = _slicedToArray(_useButtonStyles, 3),
     boxProps = _useButtonStyles2[0],
-    buttonStyles = _useButtonStyles2[1];
+    buttonStyles = _useButtonStyles2[1],
+    fontWeight = _useButtonStyles2[2].fontWeight;
   return jsxRuntime.jsx(box.Box, _objectSpread(_objectSpread(_objectSpread({}, boxProps), {}, {
     "aria-label": consumerProps.label,
     as: LinkComponent,
@@ -494,7 +500,8 @@ var ButtonLink = ts.forwardRefWithAs(function (_ref, forwardedRef) {
       isLoading: false,
       prominence: prominence,
       size: size,
-      tone: tone
+      tone: tone,
+      weight: fontWeight
     }))
   }));
 });

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

@@ -235,7 +235,8 @@ var resolveButtonChildren = function resolveButtonChildren(_ref) {
     isLoading = _ref.isLoading,
     prominence = _ref.prominence,
     size = _ref.size,
-    tone = _ref.tone;
+    tone = _ref.tone,
+    weight = _ref.weight;
   var variant = variants[prominence][tone];
   return react.Children.map(children, function (child) {
     if (typeof child === 'string' || typeof child === 'number') {
@@ -245,7 +246,7 @@ var resolveButtonChildren = function resolveButtonChildren(_ref) {
           as: "span",
           baseline: false,
           overflowStrategy: "nowrap",
-          weight: "semibold",
+          weight: weight !== null && weight !== void 0 ? weight : 'semibold',
           size: mapTokens.fontSize[size],
           tone: variant === null || variant === void 0 ? void 0 : variant.textTone,
           children: child
@@ -293,7 +294,7 @@ function HiddenWhenLoading(_ref2) {
  * passed to Emotion's `css` function.
  */
 function useButtonStyles(_ref) {
-  var _theme$components$but, _theme$components;
+  var _theme$components$but, _theme$components, _theme$components2;
   var iconOnly = _ref.iconOnly,
     prominence = _ref.prominence,
     _ref$rounded = _ref.rounded,
@@ -364,7 +365,9 @@ function useButtonStyles(_ref) {
       },
       ':focus': disabledFocusRingStyles
     }
-  })];
+  }), {
+    fontWeight: (_theme$components2 = theme$1.components) === null || _theme$components2 === void 0 || (_theme$components2 = _theme$components2.buttons) === null || _theme$components2 === void 0 ? void 0 : _theme$components2.fontWeight
+  }];
 }
 
 var _excluded$1 = ["aria-controls", "aria-describedby", "aria-expanded", "aria-label", "data", "disabled", "id", "loading", "onClick", "css", "rounded", "prominence", "size", "tone", "type"];
@@ -402,9 +405,10 @@ var Button = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
       tone: tone,
       prominence: prominence
     }),
-    _useButtonStyles2 = _slicedToArray(_useButtonStyles, 2),
+    _useButtonStyles2 = _slicedToArray(_useButtonStyles, 3),
     boxProps = _useButtonStyles2[0],
-    buttonStyles = _useButtonStyles2[1];
+    buttonStyles = _useButtonStyles2[1],
+    fontWeight = _useButtonStyles2[2].fontWeight;
   var variant = variants[prominence][tone];
   return jsxRuntime.jsxs(BaseButton, _objectSpread(_objectSpread({}, boxProps), {}, {
     "aria-controls": ariaControls,
@@ -422,7 +426,8 @@ var Button = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
       isLoading: loading,
       prominence: prominence,
       size: size,
-      tone: tone
+      tone: tone,
+      weight: fontWeight
     })), loading && jsxRuntime.jsx(Loading, {
       tone: variant === null || variant === void 0 ? void 0 : variant.textTone
     })]
@@ -476,9 +481,10 @@ var ButtonLink = ts.forwardRefWithAs(function (_ref, forwardedRef) {
       size: size,
       tone: tone
     }),
-    _useButtonStyles2 = _slicedToArray(_useButtonStyles, 2),
+    _useButtonStyles2 = _slicedToArray(_useButtonStyles, 3),
     boxProps = _useButtonStyles2[0],
-    buttonStyles = _useButtonStyles2[1];
+    buttonStyles = _useButtonStyles2[1],
+    fontWeight = _useButtonStyles2[2].fontWeight;
   return jsxRuntime.jsx(box.Box, _objectSpread(_objectSpread(_objectSpread({}, boxProps), {}, {
     "aria-label": consumerProps.label,
     as: LinkComponent,
@@ -494,7 +500,8 @@ var ButtonLink = ts.forwardRefWithAs(function (_ref, forwardedRef) {
       isLoading: false,
       prominence: prominence,
       size: size,
-      tone: tone
+      tone: tone,
+      weight: fontWeight
     }))
   }));
 });

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

@@ -231,7 +231,8 @@ var resolveButtonChildren = function resolveButtonChildren(_ref) {
     isLoading = _ref.isLoading,
     prominence = _ref.prominence,
     size = _ref.size,
-    tone = _ref.tone;
+    tone = _ref.tone,
+    weight = _ref.weight;
   var variant = variants[prominence][tone];
   return Children.map(children, function (child) {
     if (typeof child === 'string' || typeof child === 'number') {
@@ -241,7 +242,7 @@ var resolveButtonChildren = function resolveButtonChildren(_ref) {
           as: "span",
           baseline: false,
           overflowStrategy: "nowrap",
-          weight: "semibold",
+          weight: weight !== null && weight !== void 0 ? weight : 'semibold',
           size: mapTokens.fontSize[size],
           tone: variant === null || variant === void 0 ? void 0 : variant.textTone,
           children: child
@@ -289,7 +290,7 @@ function HiddenWhenLoading(_ref2) {
  * passed to Emotion's `css` function.
  */
 function useButtonStyles(_ref) {
-  var _theme$components$but, _theme$components;
+  var _theme$components$but, _theme$components, _theme$components2;
   var iconOnly = _ref.iconOnly,
     prominence = _ref.prominence,
     _ref$rounded = _ref.rounded,
@@ -360,7 +361,9 @@ function useButtonStyles(_ref) {
       },
       ':focus': disabledFocusRingStyles
     }
-  })];
+  }), {
+    fontWeight: (_theme$components2 = theme.components) === null || _theme$components2 === void 0 || (_theme$components2 = _theme$components2.buttons) === null || _theme$components2 === void 0 ? void 0 : _theme$components2.fontWeight
+  }];
 }
 
 var _excluded$1 = ["aria-controls", "aria-describedby", "aria-expanded", "aria-label", "data", "disabled", "id", "loading", "onClick", "css", "rounded", "prominence", "size", "tone", "type"];
@@ -398,9 +401,10 @@ var Button = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
       tone: tone,
       prominence: prominence
     }),
-    _useButtonStyles2 = _slicedToArray(_useButtonStyles, 2),
+    _useButtonStyles2 = _slicedToArray(_useButtonStyles, 3),
     boxProps = _useButtonStyles2[0],
-    buttonStyles = _useButtonStyles2[1];
+    buttonStyles = _useButtonStyles2[1],
+    fontWeight = _useButtonStyles2[2].fontWeight;
   var variant = variants[prominence][tone];
   return jsxs(BaseButton, _objectSpread(_objectSpread({}, boxProps), {}, {
     "aria-controls": ariaControls,
@@ -418,7 +422,8 @@ var Button = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
       isLoading: loading,
       prominence: prominence,
       size: size,
-      tone: tone
+      tone: tone,
+      weight: fontWeight
     })), loading && jsx(Loading, {
       tone: variant === null || variant === void 0 ? void 0 : variant.textTone
     })]
@@ -472,9 +477,10 @@ var ButtonLink = forwardRefWithAs(function (_ref, forwardedRef) {
       size: size,
       tone: tone
     }),
-    _useButtonStyles2 = _slicedToArray(_useButtonStyles, 2),
+    _useButtonStyles2 = _slicedToArray(_useButtonStyles, 3),
     boxProps = _useButtonStyles2[0],
-    buttonStyles = _useButtonStyles2[1];
+    buttonStyles = _useButtonStyles2[1],
+    fontWeight = _useButtonStyles2[2].fontWeight;
   return jsx(Box, _objectSpread(_objectSpread(_objectSpread({}, boxProps), {}, {
     "aria-label": consumerProps.label,
     as: LinkComponent,
@@ -490,7 +496,8 @@ var ButtonLink = forwardRefWithAs(function (_ref, forwardedRef) {
       isLoading: false,
       prominence: prominence,
       size: size,
-      tone: tone
+      tone: tone,
+      weight: fontWeight
     }))
   }));
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spark-web/button",
-  "version": "5.1.0",
+  "version": "5.2.1",
   "homepage": "https://github.com/brighte-labs/spark-web#readme",
   "repository": {
     "type": "git",
@@ -23,7 +23,7 @@
     "@spark-web/link": "^5.0.0",
     "@spark-web/spinner": "^5.0.0",
     "@spark-web/text": "^5.1.0",
-    "@spark-web/theme": "^5.5.0",
+    "@spark-web/theme": "^5.7.2",
     "@spark-web/utils": "^5.0.0"
   },
   "devDependencies": {