@spark-web/button 5.2.1 → 5.3.1

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,30 @@
1
1
  # @spark-web/button
2
2
 
3
+ ## 5.3.1
4
+
5
+ ### Patch Changes
6
+
7
+ - [#592](https://github.com/brighte-labs/spark-web/pull/592)
8
+ [`aca05c4`](https://github.com/brighte-labs/spark-web/commit/aca05c4012c507445c5dbdfb0bfd6500c16b3b5a)
9
+ Thanks [@michtntbrighte](https://github.com/michtntbrighte)! - Update border
10
+ color
11
+
12
+ ## 5.3.0
13
+
14
+ ### Minor Changes
15
+
16
+ - [#576](https://github.com/brighte-labs/spark-web/pull/576)
17
+ [`3056d86`](https://github.com/brighte-labs/spark-web/commit/3056d863266abc952b1c68775e1e349e13ef0e8f)
18
+ Thanks [@chrischua-brighte](https://github.com/chrischua-brighte)! - add new
19
+ prop for radio, new token sizes, new button tone
20
+
21
+ ### Patch Changes
22
+
23
+ - Updated dependencies
24
+ [[`3056d86`](https://github.com/brighte-labs/spark-web/commit/3056d863266abc952b1c68775e1e349e13ef0e8f)]:
25
+ - @spark-web/theme@5.9.0
26
+ - @spark-web/a11y@5.1.0
27
+
3
28
  ## 5.2.1
4
29
 
5
30
  ### Patch 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" | "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" | "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'> & Partial<Pick<ButtonStyleProps, 'rounded'>> & {
99
99
  /** Whether the children of the button is a single icon or not. */
@@ -102,7 +102,7 @@ var variants = {
102
102
  }, highDisabledStyles),
103
103
  neutral: _objectSpread({
104
104
  background: 'neutral',
105
- border: 'field',
105
+ border: 'neutral',
106
106
  backgroundHover: 'neutralHover',
107
107
  backgroundActive: 'neutralActive'
108
108
  }, highDisabledAltStyles),
@@ -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
  };
@@ -102,7 +102,7 @@ var variants = {
102
102
  }, highDisabledStyles),
103
103
  neutral: _objectSpread({
104
104
  background: 'neutral',
105
- border: 'field',
105
+ border: 'neutral',
106
106
  backgroundHover: 'neutralHover',
107
107
  backgroundActive: 'neutralActive'
108
108
  }, highDisabledAltStyles),
@@ -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
  };
@@ -98,7 +98,7 @@ var variants = {
98
98
  }, highDisabledStyles),
99
99
  neutral: _objectSpread({
100
100
  background: 'neutral',
101
- border: 'field',
101
+ border: 'neutral',
102
102
  backgroundHover: 'neutralHover',
103
103
  backgroundActive: 'neutralActive'
104
104
  }, highDisabledAltStyles),
@@ -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
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spark-web/button",
3
- "version": "5.2.1",
3
+ "version": "5.3.1",
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.7.2",
26
+ "@spark-web/theme": "^5.9.0",
27
27
  "@spark-web/utils": "^5.0.0"
28
28
  },
29
29
  "devDependencies": {