@spark-web/button 5.2.0 → 5.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/CHANGELOG.md +29 -0
  2. package/dist/declarations/src/button-link.d.ts +1 -1
  3. package/dist/declarations/src/use-button-styles.d.ts +18 -0
  4. package/dist/spark-web-button.cjs.dev.js +42 -12
  5. package/dist/spark-web-button.cjs.prod.js +42 -12
  6. package/dist/spark-web-button.esm.js +42 -12
  7. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,34 @@
1
1
  # @spark-web/button
2
2
 
3
+ ## 5.3.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#576](https://github.com/brighte-labs/spark-web/pull/576)
8
+ [`3056d86`](https://github.com/brighte-labs/spark-web/commit/3056d863266abc952b1c68775e1e349e13ef0e8f)
9
+ Thanks [@chrischua-brighte](https://github.com/chrischua-brighte)! - add new
10
+ prop for radio, new token sizes, new button tone
11
+
12
+ ### Patch Changes
13
+
14
+ - Updated dependencies
15
+ [[`3056d86`](https://github.com/brighte-labs/spark-web/commit/3056d863266abc952b1c68775e1e349e13ef0e8f)]:
16
+ - @spark-web/theme@5.9.0
17
+ - @spark-web/a11y@5.1.0
18
+
19
+ ## 5.2.1
20
+
21
+ ### Patch Changes
22
+
23
+ - [#574](https://github.com/brighte-labs/spark-web/pull/574)
24
+ [`e77b91f`](https://github.com/brighte-labs/spark-web/commit/e77b91fcd59e18795c49fcefec29259eb2aec0a6)
25
+ Thanks [@mkt-brighte](https://github.com/mkt-brighte)! - Move button
26
+ fontWeight to token
27
+
28
+ - Updated dependencies
29
+ [[`e77b91f`](https://github.com/brighte-labs/spark-web/commit/e77b91fcd59e18795c49fcefec29259eb2aec0a6)]:
30
+ - @spark-web/theme@5.7.2
31
+
3
32
  ## 5.2.0
4
33
 
5
34
  ### Minor Changes
package/dist/declarations/src/button-link.d.ts CHANGED
@@ -5,5 +5,5 @@ export declare type ButtonLinkProps = LinkComponentProps & CommonButtonProps;
5
5
  /** The appearance of a `Button`, with the semantics of a link. */
6
6
  export declare const ButtonLink: <Comp extends import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> = "a">(props: {
7
7
  as?: Comp | undefined;
8
- 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;
8
+ ref?: import("react").Ref<Comp extends "symbol" | "text" | "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" | "textPath" | "tspan" | "use" | "view" | keyof HTMLElementTagNameMap ? (HTMLElementTagNameMap & Pick<SVGElementTagNameMap, "symbol" | "text" | "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" | "textPath" | "tspan" | "use" | "view">)[Comp] : Comp extends new (...args: any) => any ? InstanceType<Comp> : undefined> | undefined;
9
9
  } & 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 CHANGED
@@ -52,7 +52,23 @@ export declare function useButtonStyles({ iconOnly, prominence, rounded, size, t
52
52
  } | {
53
53
  border?: string | undefined;
54
54
  outline?: string | undefined;
55
+ /**
56
+ * useButtonStyles
57
+ *
58
+ * Custom hook for styling buttons and certain links.
59
+ * Returns a tuple where the first item is an object of props to spread onto the
60
+ * underlying `Box` component, and the second item is a CSS object that can be
61
+ * passed to Emotion's `css` function.
62
+ */
55
63
  outlineOffset?: string | undefined;
64
+ /**
65
+ * useButtonStyles
66
+ *
67
+ * Custom hook for styling buttons and certain links.
68
+ * Returns a tuple where the first item is an object of props to spread onto the
69
+ * underlying `Box` component, and the second item is a CSS object that can be
70
+ * passed to Emotion's `css` function.
71
+ */
56
72
  boxShadow?: string | undefined;
57
73
  };
58
74
  };
@@ -76,6 +92,8 @@ export declare function useButtonStyles({ iconOnly, prominence, rounded, size, t
76
92
  readonly transitionProperty: string;
77
93
  readonly transitionTimingFunction: string;
78
94
  readonly transitionDuration: string;
95
+ }, {
96
+ readonly fontWeight: "medium" | "light" | "bold" | "thin" | "extralight" | "regular" | "semibold" | "extrabold" | "black" | undefined;
79
97
  }];
80
98
  export declare type UseButtonStylesProps = Omit<Required<ButtonStyleProps>, 'css' | 'rounded'> & Partial<Pick<ButtonStyleProps, 'rounded'>> & {
81
99
  /** Whether the children of the button is a single icon or not. */
package/dist/spark-web-button.cjs.dev.js CHANGED
@@ -117,7 +117,12 @@ var variants = {
117
117
  backgroundActive: 'criticalActive'
118
118
  }, highDisabledStyles),
119
119
  caution: undefined,
120
- info: undefined
120
+ info: undefined,
121
+ primaryDark: _objectSpread({
122
+ background: 'primaryDark',
123
+ backgroundHover: 'primaryHover',
124
+ backgroundActive: 'primaryActive'
125
+ }, highDisabledStyles)
121
126
  },
122
127
  low: {
123
128
  primary: _objectSpread({
@@ -168,7 +173,19 @@ var variants = {
168
173
  background: 'infoLow',
169
174
  backgroundHover: 'infoLowHover',
170
175
  backgroundActive: 'infoLowActive'
171
- }, lowDisabledStyles)
176
+ }, lowDisabledStyles),
177
+ primaryDark: _objectSpread({
178
+ background: 'surface',
179
+ border: 'primaryActive',
180
+ borderWidth: 'large',
181
+ textTone: 'primaryActive',
182
+ backgroundHover: 'none',
183
+ borderHover: 'primaryHover',
184
+ textToneHover: 'primaryHover',
185
+ backgroundActive: 'none',
186
+ borderActive: 'primaryActive',
187
+ textToneActive: 'primaryActive'
188
+ }, lowDisabledAltStyles)
172
189
  },
173
190
  none: {
174
191
  primary: _objectSpread({
@@ -212,6 +229,12 @@ var variants = {
212
229
  textTone: 'info',
213
230
  backgroundHover: 'infoLowHover',
214
231
  backgroundActive: 'infoLowActive'
232
+ }, noneDisabledStyles),
233
+ primaryDark: _objectSpread({
234
+ background: 'surface',
235
+ textTone: 'primaryActive',
236
+ backgroundHover: 'primaryLowHover',
237
+ backgroundActive: 'primaryLowActive'
215
238
  }, noneDisabledStyles)
216
239
  }
217
240
  };
@@ -235,7 +258,8 @@ var resolveButtonChildren = function resolveButtonChildren(_ref) {
235
258
  isLoading = _ref.isLoading,
236
259
  prominence = _ref.prominence,
237
260
  size = _ref.size,
238
- tone = _ref.tone;
261
+ tone = _ref.tone,
262
+ weight = _ref.weight;
239
263
  var variant = variants[prominence][tone];
240
264
  return react.Children.map(children, function (child) {
241
265
  if (typeof child === 'string' || typeof child === 'number') {
@@ -245,7 +269,7 @@ var resolveButtonChildren = function resolveButtonChildren(_ref) {
245
269
  as: "span",
246
270
  baseline: false,
247
271
  overflowStrategy: "nowrap",
248
- weight: "semibold",
272
+ weight: weight !== null && weight !== void 0 ? weight : 'semibold',
249
273
  size: mapTokens.fontSize[size],
250
274
  tone: variant === null || variant === void 0 ? void 0 : variant.textTone,
251
275
  children: child
@@ -293,7 +317,7 @@ function HiddenWhenLoading(_ref2) {
293
317
  * passed to Emotion's `css` function.
294
318
  */
295
319
  function useButtonStyles(_ref) {
296
- var _theme$components$but, _theme$components;
320
+ var _theme$components$but, _theme$components, _theme$components2;
297
321
  var iconOnly = _ref.iconOnly,
298
322
  prominence = _ref.prominence,
299
323
  _ref$rounded = _ref.rounded,
@@ -364,7 +388,9 @@ function useButtonStyles(_ref) {
364
388
  },
365
389
  ':focus': disabledFocusRingStyles
366
390
  }
367
- })];
391
+ }), {
392
+ 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
393
+ }];
368
394
  }
369
395
 
370
396
  var _excluded$1 = ["aria-controls", "aria-describedby", "aria-expanded", "aria-label", "data", "disabled", "id", "loading", "onClick", "css", "rounded", "prominence", "size", "tone", "type"];
@@ -402,9 +428,10 @@ var Button = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
402
428
  tone: tone,
403
429
  prominence: prominence
404
430
  }),
405
- _useButtonStyles2 = _slicedToArray(_useButtonStyles, 2),
431
+ _useButtonStyles2 = _slicedToArray(_useButtonStyles, 3),
406
432
  boxProps = _useButtonStyles2[0],
407
- buttonStyles = _useButtonStyles2[1];
433
+ buttonStyles = _useButtonStyles2[1],
434
+ fontWeight = _useButtonStyles2[2].fontWeight;
408
435
  var variant = variants[prominence][tone];
409
436
  return jsxRuntime.jsxs(BaseButton, _objectSpread(_objectSpread({}, boxProps), {}, {
410
437
  "aria-controls": ariaControls,
@@ -422,7 +449,8 @@ var Button = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
422
449
  isLoading: loading,
423
450
  prominence: prominence,
424
451
  size: size,
425
- tone: tone
452
+ tone: tone,
453
+ weight: fontWeight
426
454
  })), loading && jsxRuntime.jsx(Loading, {
427
455
  tone: variant === null || variant === void 0 ? void 0 : variant.textTone
428
456
  })]
@@ -476,9 +504,10 @@ var ButtonLink = ts.forwardRefWithAs(function (_ref, forwardedRef) {
476
504
  size: size,
477
505
  tone: tone
478
506
  }),
479
- _useButtonStyles2 = _slicedToArray(_useButtonStyles, 2),
507
+ _useButtonStyles2 = _slicedToArray(_useButtonStyles, 3),
480
508
  boxProps = _useButtonStyles2[0],
481
- buttonStyles = _useButtonStyles2[1];
509
+ buttonStyles = _useButtonStyles2[1],
510
+ fontWeight = _useButtonStyles2[2].fontWeight;
482
511
  return jsxRuntime.jsx(box.Box, _objectSpread(_objectSpread(_objectSpread({}, boxProps), {}, {
483
512
  "aria-label": consumerProps.label,
484
513
  as: LinkComponent,
@@ -494,7 +523,8 @@ var ButtonLink = ts.forwardRefWithAs(function (_ref, forwardedRef) {
494
523
  isLoading: false,
495
524
  prominence: prominence,
496
525
  size: size,
497
- tone: tone
526
+ tone: tone,
527
+ weight: fontWeight
498
528
  }))
499
529
  }));
500
530
  });
package/dist/spark-web-button.cjs.prod.js CHANGED
@@ -117,7 +117,12 @@ var variants = {
117
117
  backgroundActive: 'criticalActive'
118
118
  }, highDisabledStyles),
119
119
  caution: undefined,
120
- info: undefined
120
+ info: undefined,
121
+ primaryDark: _objectSpread({
122
+ background: 'primaryDark',
123
+ backgroundHover: 'primaryHover',
124
+ backgroundActive: 'primaryActive'
125
+ }, highDisabledStyles)
121
126
  },
122
127
  low: {
123
128
  primary: _objectSpread({
@@ -168,7 +173,19 @@ var variants = {
168
173
  background: 'infoLow',
169
174
  backgroundHover: 'infoLowHover',
170
175
  backgroundActive: 'infoLowActive'
171
- }, lowDisabledStyles)
176
+ }, lowDisabledStyles),
177
+ primaryDark: _objectSpread({
178
+ background: 'surface',
179
+ border: 'primaryActive',
180
+ borderWidth: 'large',
181
+ textTone: 'primaryActive',
182
+ backgroundHover: 'none',
183
+ borderHover: 'primaryHover',
184
+ textToneHover: 'primaryHover',
185
+ backgroundActive: 'none',
186
+ borderActive: 'primaryActive',
187
+ textToneActive: 'primaryActive'
188
+ }, lowDisabledAltStyles)
172
189
  },
173
190
  none: {
174
191
  primary: _objectSpread({
@@ -212,6 +229,12 @@ var variants = {
212
229
  textTone: 'info',
213
230
  backgroundHover: 'infoLowHover',
214
231
  backgroundActive: 'infoLowActive'
232
+ }, noneDisabledStyles),
233
+ primaryDark: _objectSpread({
234
+ background: 'surface',
235
+ textTone: 'primaryActive',
236
+ backgroundHover: 'primaryLowHover',
237
+ backgroundActive: 'primaryLowActive'
215
238
  }, noneDisabledStyles)
216
239
  }
217
240
  };
@@ -235,7 +258,8 @@ var resolveButtonChildren = function resolveButtonChildren(_ref) {
235
258
  isLoading = _ref.isLoading,
236
259
  prominence = _ref.prominence,
237
260
  size = _ref.size,
238
- tone = _ref.tone;
261
+ tone = _ref.tone,
262
+ weight = _ref.weight;
239
263
  var variant = variants[prominence][tone];
240
264
  return react.Children.map(children, function (child) {
241
265
  if (typeof child === 'string' || typeof child === 'number') {
@@ -245,7 +269,7 @@ var resolveButtonChildren = function resolveButtonChildren(_ref) {
245
269
  as: "span",
246
270
  baseline: false,
247
271
  overflowStrategy: "nowrap",
248
- weight: "semibold",
272
+ weight: weight !== null && weight !== void 0 ? weight : 'semibold',
249
273
  size: mapTokens.fontSize[size],
250
274
  tone: variant === null || variant === void 0 ? void 0 : variant.textTone,
251
275
  children: child
@@ -293,7 +317,7 @@ function HiddenWhenLoading(_ref2) {
293
317
  * passed to Emotion's `css` function.
294
318
  */
295
319
  function useButtonStyles(_ref) {
296
- var _theme$components$but, _theme$components;
320
+ var _theme$components$but, _theme$components, _theme$components2;
297
321
  var iconOnly = _ref.iconOnly,
298
322
  prominence = _ref.prominence,
299
323
  _ref$rounded = _ref.rounded,
@@ -364,7 +388,9 @@ function useButtonStyles(_ref) {
364
388
  },
365
389
  ':focus': disabledFocusRingStyles
366
390
  }
367
- })];
391
+ }), {
392
+ 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
393
+ }];
368
394
  }
369
395
 
370
396
  var _excluded$1 = ["aria-controls", "aria-describedby", "aria-expanded", "aria-label", "data", "disabled", "id", "loading", "onClick", "css", "rounded", "prominence", "size", "tone", "type"];
@@ -402,9 +428,10 @@ var Button = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
402
428
  tone: tone,
403
429
  prominence: prominence
404
430
  }),
405
- _useButtonStyles2 = _slicedToArray(_useButtonStyles, 2),
431
+ _useButtonStyles2 = _slicedToArray(_useButtonStyles, 3),
406
432
  boxProps = _useButtonStyles2[0],
407
- buttonStyles = _useButtonStyles2[1];
433
+ buttonStyles = _useButtonStyles2[1],
434
+ fontWeight = _useButtonStyles2[2].fontWeight;
408
435
  var variant = variants[prominence][tone];
409
436
  return jsxRuntime.jsxs(BaseButton, _objectSpread(_objectSpread({}, boxProps), {}, {
410
437
  "aria-controls": ariaControls,
@@ -422,7 +449,8 @@ var Button = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
422
449
  isLoading: loading,
423
450
  prominence: prominence,
424
451
  size: size,
425
- tone: tone
452
+ tone: tone,
453
+ weight: fontWeight
426
454
  })), loading && jsxRuntime.jsx(Loading, {
427
455
  tone: variant === null || variant === void 0 ? void 0 : variant.textTone
428
456
  })]
@@ -476,9 +504,10 @@ var ButtonLink = ts.forwardRefWithAs(function (_ref, forwardedRef) {
476
504
  size: size,
477
505
  tone: tone
478
506
  }),
479
- _useButtonStyles2 = _slicedToArray(_useButtonStyles, 2),
507
+ _useButtonStyles2 = _slicedToArray(_useButtonStyles, 3),
480
508
  boxProps = _useButtonStyles2[0],
481
- buttonStyles = _useButtonStyles2[1];
509
+ buttonStyles = _useButtonStyles2[1],
510
+ fontWeight = _useButtonStyles2[2].fontWeight;
482
511
  return jsxRuntime.jsx(box.Box, _objectSpread(_objectSpread(_objectSpread({}, boxProps), {}, {
483
512
  "aria-label": consumerProps.label,
484
513
  as: LinkComponent,
@@ -494,7 +523,8 @@ var ButtonLink = ts.forwardRefWithAs(function (_ref, forwardedRef) {
494
523
  isLoading: false,
495
524
  prominence: prominence,
496
525
  size: size,
497
- tone: tone
526
+ tone: tone,
527
+ weight: fontWeight
498
528
  }))
499
529
  }));
500
530
  });
package/dist/spark-web-button.esm.js CHANGED
@@ -113,7 +113,12 @@ var variants = {
113
113
  backgroundActive: 'criticalActive'
114
114
  }, highDisabledStyles),
115
115
  caution: undefined,
116
- info: undefined
116
+ info: undefined,
117
+ primaryDark: _objectSpread({
118
+ background: 'primaryDark',
119
+ backgroundHover: 'primaryHover',
120
+ backgroundActive: 'primaryActive'
121
+ }, highDisabledStyles)
117
122
  },
118
123
  low: {
119
124
  primary: _objectSpread({
@@ -164,7 +169,19 @@ var variants = {
164
169
  background: 'infoLow',
165
170
  backgroundHover: 'infoLowHover',
166
171
  backgroundActive: 'infoLowActive'
167
- }, lowDisabledStyles)
172
+ }, lowDisabledStyles),
173
+ primaryDark: _objectSpread({
174
+ background: 'surface',
175
+ border: 'primaryActive',
176
+ borderWidth: 'large',
177
+ textTone: 'primaryActive',
178
+ backgroundHover: 'none',
179
+ borderHover: 'primaryHover',
180
+ textToneHover: 'primaryHover',
181
+ backgroundActive: 'none',
182
+ borderActive: 'primaryActive',
183
+ textToneActive: 'primaryActive'
184
+ }, lowDisabledAltStyles)
168
185
  },
169
186
  none: {
170
187
  primary: _objectSpread({
@@ -208,6 +225,12 @@ var variants = {
208
225
  textTone: 'info',
209
226
  backgroundHover: 'infoLowHover',
210
227
  backgroundActive: 'infoLowActive'
228
+ }, noneDisabledStyles),
229
+ primaryDark: _objectSpread({
230
+ background: 'surface',
231
+ textTone: 'primaryActive',
232
+ backgroundHover: 'primaryLowHover',
233
+ backgroundActive: 'primaryLowActive'
211
234
  }, noneDisabledStyles)
212
235
  }
213
236
  };
@@ -231,7 +254,8 @@ var resolveButtonChildren = function resolveButtonChildren(_ref) {
231
254
  isLoading = _ref.isLoading,
232
255
  prominence = _ref.prominence,
233
256
  size = _ref.size,
234
- tone = _ref.tone;
257
+ tone = _ref.tone,
258
+ weight = _ref.weight;
235
259
  var variant = variants[prominence][tone];
236
260
  return Children.map(children, function (child) {
237
261
  if (typeof child === 'string' || typeof child === 'number') {
@@ -241,7 +265,7 @@ var resolveButtonChildren = function resolveButtonChildren(_ref) {
241
265
  as: "span",
242
266
  baseline: false,
243
267
  overflowStrategy: "nowrap",
244
- weight: "semibold",
268
+ weight: weight !== null && weight !== void 0 ? weight : 'semibold',
245
269
  size: mapTokens.fontSize[size],
246
270
  tone: variant === null || variant === void 0 ? void 0 : variant.textTone,
247
271
  children: child
@@ -289,7 +313,7 @@ function HiddenWhenLoading(_ref2) {
289
313
  * passed to Emotion's `css` function.
290
314
  */
291
315
  function useButtonStyles(_ref) {
292
- var _theme$components$but, _theme$components;
316
+ var _theme$components$but, _theme$components, _theme$components2;
293
317
  var iconOnly = _ref.iconOnly,
294
318
  prominence = _ref.prominence,
295
319
  _ref$rounded = _ref.rounded,
@@ -360,7 +384,9 @@ function useButtonStyles(_ref) {
360
384
  },
361
385
  ':focus': disabledFocusRingStyles
362
386
  }
363
- })];
387
+ }), {
388
+ 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
389
+ }];
364
390
  }
365
391
 
366
392
  var _excluded$1 = ["aria-controls", "aria-describedby", "aria-expanded", "aria-label", "data", "disabled", "id", "loading", "onClick", "css", "rounded", "prominence", "size", "tone", "type"];
@@ -398,9 +424,10 @@ var Button = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
398
424
  tone: tone,
399
425
  prominence: prominence
400
426
  }),
401
- _useButtonStyles2 = _slicedToArray(_useButtonStyles, 2),
427
+ _useButtonStyles2 = _slicedToArray(_useButtonStyles, 3),
402
428
  boxProps = _useButtonStyles2[0],
403
- buttonStyles = _useButtonStyles2[1];
429
+ buttonStyles = _useButtonStyles2[1],
430
+ fontWeight = _useButtonStyles2[2].fontWeight;
404
431
  var variant = variants[prominence][tone];
405
432
  return jsxs(BaseButton, _objectSpread(_objectSpread({}, boxProps), {}, {
406
433
  "aria-controls": ariaControls,
@@ -418,7 +445,8 @@ var Button = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
418
445
  isLoading: loading,
419
446
  prominence: prominence,
420
447
  size: size,
421
- tone: tone
448
+ tone: tone,
449
+ weight: fontWeight
422
450
  })), loading && jsx(Loading, {
423
451
  tone: variant === null || variant === void 0 ? void 0 : variant.textTone
424
452
  })]
@@ -472,9 +500,10 @@ var ButtonLink = forwardRefWithAs(function (_ref, forwardedRef) {
472
500
  size: size,
473
501
  tone: tone
474
502
  }),
475
- _useButtonStyles2 = _slicedToArray(_useButtonStyles, 2),
503
+ _useButtonStyles2 = _slicedToArray(_useButtonStyles, 3),
476
504
  boxProps = _useButtonStyles2[0],
477
- buttonStyles = _useButtonStyles2[1];
505
+ buttonStyles = _useButtonStyles2[1],
506
+ fontWeight = _useButtonStyles2[2].fontWeight;
478
507
  return jsx(Box, _objectSpread(_objectSpread(_objectSpread({}, boxProps), {}, {
479
508
  "aria-label": consumerProps.label,
480
509
  as: LinkComponent,
@@ -490,7 +519,8 @@ var ButtonLink = forwardRefWithAs(function (_ref, forwardedRef) {
490
519
  isLoading: false,
491
520
  prominence: prominence,
492
521
  size: size,
493
- tone: tone
522
+ tone: tone,
523
+ weight: fontWeight
494
524
  }))
495
525
  }));
496
526
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spark-web/button",
3
- "version": "5.2.0",
3
+ "version": "5.3.0",
4
4
  "homepage": "https://github.com/brighte-labs/spark-web#readme",
5
5
  "repository": {
6
6
  "type": "git",
@@ -17,13 +17,13 @@
17
17
  "dependencies": {
18
18
  "@babel/runtime": "^7.25.0",
19
19
  "@emotion/react": "^11.14.0",
20
- "@spark-web/a11y": "^5.0.0",
20
+ "@spark-web/a11y": "^5.1.0",
21
21
  "@spark-web/box": "^5.0.0",
22
22
  "@spark-web/icon": "^5.0.0",
23
23
  "@spark-web/link": "^5.0.0",
24
24
  "@spark-web/spinner": "^5.0.0",
25
25
  "@spark-web/text": "^5.1.0",
26
- "@spark-web/theme": "^5.6.0",
26
+ "@spark-web/theme": "^5.9.0",
27
27
  "@spark-web/utils": "^5.0.0"
28
28
  },
29
29
  "devDependencies": {