@spark-web/button 5.4.0 → 5.5.2

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.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,49 @@
1
1
  # @spark-web/button
2
2
 
3
+ ## 5.5.2
4
+
5
+ ### Patch Changes
6
+
7
+ - [#698](https://github.com/brighte-labs/spark-web/pull/698)
8
+ [`814b373`](https://github.com/brighte-labs/spark-web/commit/814b373cbe9fcf0757738c78eef6b516624df62c)
9
+ Thanks [@michtntbrighte](https://github.com/michtntbrighte)! - Bump version
10
+
11
+ - Updated dependencies
12
+ [[`814b373`](https://github.com/brighte-labs/spark-web/commit/814b373cbe9fcf0757738c78eef6b516624df62c)]:
13
+ - @spark-web/box@5.2.2
14
+ - @spark-web/link@5.0.2
15
+ - @spark-web/text@5.2.3
16
+ - @spark-web/theme@5.12.1
17
+
18
+ ## 5.5.1
19
+
20
+ ### Patch Changes
21
+
22
+ - [#693](https://github.com/brighte-labs/spark-web/pull/693)
23
+ [`1995db7`](https://github.com/brighte-labs/spark-web/commit/1995db7f4342803732c7648ab3ca6d32442cc347)
24
+ Thanks [@michtntbrighte](https://github.com/michtntbrighte)! - Add Bravo theme
25
+
26
+ - Updated dependencies
27
+ [[`1995db7`](https://github.com/brighte-labs/spark-web/commit/1995db7f4342803732c7648ab3ca6d32442cc347)]:
28
+ - @spark-web/theme@5.12.0
29
+ - @spark-web/text@5.2.2
30
+
31
+ ## 5.5.0
32
+
33
+ ### Minor Changes
34
+
35
+ - [#659](https://github.com/brighte-labs/spark-web/pull/659)
36
+ [`6b8615a`](https://github.com/brighte-labs/spark-web/commit/6b8615a0e63d51a6757fd569bf21798a3bceaeea)
37
+ Thanks [@mkt-brighte](https://github.com/mkt-brighte)! - Added dark tone for
38
+ button component and add dark tokens
39
+
40
+ ### Patch Changes
41
+
42
+ - Updated dependencies
43
+ [[`6b8615a`](https://github.com/brighte-labs/spark-web/commit/6b8615a0e63d51a6757fd569bf21798a3bceaeea)]:
44
+ - @spark-web/a11y@5.2.0
45
+ - @spark-web/theme@5.11.1
46
+
3
47
  ## 5.4.0
4
48
 
5
49
  ### Minor Changes
@@ -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" | "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;
8
+ 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;
9
9
  } & Omit<import("react").PropsWithoutRef<import("react").ComponentProps<Comp>>, "as"> & ButtonLinkProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
@@ -93,7 +93,7 @@ export declare function useButtonStyles({ iconOnly, prominence, rounded, size, t
93
93
  readonly transitionTimingFunction: string;
94
94
  readonly transitionDuration: string;
95
95
  }, {
96
- readonly fontWeight: "medium" | "light" | "bold" | "thin" | "extralight" | "regular" | "semibold" | "extrabold" | "black" | undefined;
96
+ readonly fontWeight: "bold" | "medium" | "light" | "thin" | "black" | "extralight" | "regular" | "semibold" | "extrabold" | undefined;
97
97
  }];
98
98
  export declare type UseButtonStylesProps = Omit<Required<ButtonStyleProps>, 'css' | 'rounded' | 'filled'> & Partial<Pick<ButtonStyleProps, 'rounded' | 'filled'>> & {
99
99
  /** Whether the children of the button is a single icon or not. */
@@ -122,6 +122,11 @@ var variants = {
122
122
  background: 'primaryDark',
123
123
  backgroundHover: 'primaryHover',
124
124
  backgroundActive: 'primaryActive'
125
+ }, highDisabledStyles),
126
+ dark: _objectSpread({
127
+ background: 'dark',
128
+ backgroundHover: 'darkHover',
129
+ backgroundActive: 'darkActive'
125
130
  }, highDisabledStyles)
126
131
  },
127
132
  low: {
@@ -186,6 +191,16 @@ var variants = {
186
191
  backgroundActive: 'none',
187
192
  borderActive: 'primaryActive',
188
193
  textToneActive: 'primaryActive'
194
+ }, lowDisabledAltStyles),
195
+ dark: _objectSpread({
196
+ background: 'surface',
197
+ backgroundHover: 'none',
198
+ backgroundActive: 'none',
199
+ textTone: 'dark',
200
+ borderWidth: 'large',
201
+ border: 'dark',
202
+ borderHover: 'darkHover',
203
+ borderActive: 'darkActive'
189
204
  }, lowDisabledAltStyles)
190
205
  },
191
206
  none: {
@@ -236,6 +251,12 @@ var variants = {
236
251
  textTone: 'primaryActive',
237
252
  backgroundHover: 'primaryLowHover',
238
253
  backgroundActive: 'primaryLowActive'
254
+ }, noneDisabledStyles),
255
+ dark: _objectSpread({
256
+ background: 'surface',
257
+ textTone: 'dark',
258
+ backgroundHover: 'darkLowHover',
259
+ backgroundActive: 'darkLowActive'
239
260
  }, noneDisabledStyles)
240
261
  }
241
262
  };
@@ -122,6 +122,11 @@ var variants = {
122
122
  background: 'primaryDark',
123
123
  backgroundHover: 'primaryHover',
124
124
  backgroundActive: 'primaryActive'
125
+ }, highDisabledStyles),
126
+ dark: _objectSpread({
127
+ background: 'dark',
128
+ backgroundHover: 'darkHover',
129
+ backgroundActive: 'darkActive'
125
130
  }, highDisabledStyles)
126
131
  },
127
132
  low: {
@@ -186,6 +191,16 @@ var variants = {
186
191
  backgroundActive: 'none',
187
192
  borderActive: 'primaryActive',
188
193
  textToneActive: 'primaryActive'
194
+ }, lowDisabledAltStyles),
195
+ dark: _objectSpread({
196
+ background: 'surface',
197
+ backgroundHover: 'none',
198
+ backgroundActive: 'none',
199
+ textTone: 'dark',
200
+ borderWidth: 'large',
201
+ border: 'dark',
202
+ borderHover: 'darkHover',
203
+ borderActive: 'darkActive'
189
204
  }, lowDisabledAltStyles)
190
205
  },
191
206
  none: {
@@ -236,6 +251,12 @@ var variants = {
236
251
  textTone: 'primaryActive',
237
252
  backgroundHover: 'primaryLowHover',
238
253
  backgroundActive: 'primaryLowActive'
254
+ }, noneDisabledStyles),
255
+ dark: _objectSpread({
256
+ background: 'surface',
257
+ textTone: 'dark',
258
+ backgroundHover: 'darkLowHover',
259
+ backgroundActive: 'darkLowActive'
239
260
  }, noneDisabledStyles)
240
261
  }
241
262
  };
@@ -118,6 +118,11 @@ var variants = {
118
118
  background: 'primaryDark',
119
119
  backgroundHover: 'primaryHover',
120
120
  backgroundActive: 'primaryActive'
121
+ }, highDisabledStyles),
122
+ dark: _objectSpread({
123
+ background: 'dark',
124
+ backgroundHover: 'darkHover',
125
+ backgroundActive: 'darkActive'
121
126
  }, highDisabledStyles)
122
127
  },
123
128
  low: {
@@ -182,6 +187,16 @@ var variants = {
182
187
  backgroundActive: 'none',
183
188
  borderActive: 'primaryActive',
184
189
  textToneActive: 'primaryActive'
190
+ }, lowDisabledAltStyles),
191
+ dark: _objectSpread({
192
+ background: 'surface',
193
+ backgroundHover: 'none',
194
+ backgroundActive: 'none',
195
+ textTone: 'dark',
196
+ borderWidth: 'large',
197
+ border: 'dark',
198
+ borderHover: 'darkHover',
199
+ borderActive: 'darkActive'
185
200
  }, lowDisabledAltStyles)
186
201
  },
187
202
  none: {
@@ -232,6 +247,12 @@ var variants = {
232
247
  textTone: 'primaryActive',
233
248
  backgroundHover: 'primaryLowHover',
234
249
  backgroundActive: 'primaryLowActive'
250
+ }, noneDisabledStyles),
251
+ dark: _objectSpread({
252
+ background: 'surface',
253
+ textTone: 'dark',
254
+ backgroundHover: 'darkLowHover',
255
+ backgroundActive: 'darkLowActive'
235
256
  }, noneDisabledStyles)
236
257
  }
237
258
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spark-web/button",
3
- "version": "5.4.0",
3
+ "version": "5.5.2",
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.1.0",
21
- "@spark-web/box": "^5.0.0",
20
+ "@spark-web/a11y": "^5.2.0",
21
+ "@spark-web/box": "^5.2.2",
22
22
  "@spark-web/icon": "^5.0.0",
23
- "@spark-web/link": "^5.0.0",
23
+ "@spark-web/link": "^5.0.2",
24
24
  "@spark-web/spinner": "^5.0.1",
25
- "@spark-web/text": "^5.1.0",
26
- "@spark-web/theme": "^5.11.0",
25
+ "@spark-web/text": "^5.2.3",
26
+ "@spark-web/theme": "^5.12.1",
27
27
  "@spark-web/utils": "^5.0.0"
28
28
  },
29
29
  "devDependencies": {