@spark-web/button 5.3.3 → 5.5.0

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @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
+
+- [#647](https://github.com/brighte-labs/spark-web/pull/647)
+  [`b6825e0`](https://github.com/brighte-labs/spark-web/commit/b6825e0fdffb297cecb033fd70e15b13a65d27a7)
+  Thanks [@michtntbrighte](https://github.com/michtntbrighte)! - Improve low
+  prominence and support filled props for button
+
 ## 5.3.3
 
 ### Patch Changes

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

@@ -22,6 +22,8 @@ export declare type ButtonProps = CommonButtonProps & {
     size?: CommonButtonProps['size'];
     /** Provide an alternate type if the button is within a form. */
     type?: 'button' | 'submit' | 'reset';
+    /** When true, the button will be filled depending on the variant. */
+    filled?: boolean;
 };
 /**
  * Buttons are used to initialize an action, their label should express what

package/dist/declarations/src/types.d.ts

@@ -38,5 +38,7 @@ export declare type ButtonStyleProps = {
     size?: ButtonSize;
     /** Sets the tone of the button. */
     tone?: ButtonTone;
+    /** Sets the background color of the button. */
+    filled?: boolean;
 };
 export {};

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

@@ -7,7 +7,7 @@ import type { ButtonStyleProps } from "./types.js";
  * underlying `Box` component, and the second item is a CSS object that can be
  * passed to Emotion's `css` function.
  */
-export declare function useButtonStyles({ iconOnly, prominence, rounded, size, tone, }: UseButtonStylesProps): readonly [{
+export declare function useButtonStyles({ iconOnly, prominence, rounded, size, tone, filled, }: UseButtonStylesProps): readonly [{
     readonly alignItems: "center";
     readonly background: string | number | undefined;
     readonly border: import("@spark-web/theme").ResponsiveProp<string> | undefined;
@@ -95,7 +95,7 @@ export declare function useButtonStyles({ iconOnly, prominence, rounded, size, t
 }, {
     readonly fontWeight: "bold" | "medium" | "light" | "thin" | "black" | "extralight" | "regular" | "semibold" | "extrabold" | undefined;
 }];
-export declare type UseButtonStylesProps = Omit<Required<ButtonStyleProps>, 'css' | 'rounded'> & Partial<Pick<ButtonStyleProps, 'rounded'>> & {
+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. */
     iconOnly: boolean;
 };

package/dist/declarations/src/utils.d.ts

@@ -4,6 +4,7 @@ import type { SparkTheme } from '@spark-web/theme';
 import type { ButtonProminence, ButtonTone } from "./types.js";
 declare type BaseButtonStyles = {
     background: BoxProps['background'];
+    backgroundFill?: BoxProps['background'];
     border?: BoxProps['border'];
     borderWidth?: BoxProps['borderWidth'];
     textTone?: ForegroundTone;

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

@@ -122,14 +122,20 @@ var variants = {
       background: 'primaryDark',
       backgroundHover: 'primaryHover',
       backgroundActive: 'primaryActive'
+    }, highDisabledStyles),
+    dark: _objectSpread({
+      background: 'dark',
+      backgroundHover: 'darkHover',
+      backgroundActive: 'darkActive'
     }, highDisabledStyles)
   },
   low: {
     primary: _objectSpread({
       background: 'surface',
+      backgroundFill: 'primarySoft',
       border: 'primary',
       borderWidth: 'large',
-      textTone: 'primary',
+      textTone: 'neutral',
       backgroundHover: 'none',
       borderHover: 'primaryHover',
       textToneHover: 'primaryHover',
@@ -185,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: {
@@ -235,6 +251,12 @@ var variants = {
       textTone: 'primaryActive',
       backgroundHover: 'primaryLowHover',
       backgroundActive: 'primaryLowActive'
+    }, noneDisabledStyles),
+    dark: _objectSpread({
+      background: 'surface',
+      textTone: 'dark',
+      backgroundHover: 'darkLowHover',
+      backgroundActive: 'darkLowActive'
     }, noneDisabledStyles)
   }
 };
@@ -317,13 +339,15 @@ function HiddenWhenLoading(_ref2) {
  * passed to Emotion's `css` function.
  */
 function useButtonStyles(_ref) {
-  var _theme$components$but, _theme$components, _theme$components2;
+  var _variant$backgroundFi, _theme$components$but, _theme$components, _theme$components2;
   var iconOnly = _ref.iconOnly,
     prominence = _ref.prominence,
     _ref$rounded = _ref.rounded,
     rounded = _ref$rounded === void 0 ? false : _ref$rounded,
     size = _ref.size,
-    tone = _ref.tone;
+    tone = _ref.tone,
+    _ref$filled = _ref.filled,
+    filled = _ref$filled === void 0 ? false : _ref$filled;
   var theme$1 = theme.useTheme();
   var focusRingStyles = a11y.useFocusRing({
     tone: tone,
@@ -341,7 +365,7 @@ function useButtonStyles(_ref) {
   };
   return [{
     alignItems: 'center',
-    background: variant === null || variant === void 0 ? void 0 : variant.background,
+    background: filled ? (_variant$backgroundFi = variant === null || variant === void 0 ? void 0 : variant.backgroundFill) !== null && _variant$backgroundFi !== void 0 ? _variant$backgroundFi : variant === null || variant === void 0 ? void 0 : variant.background : variant === null || variant === void 0 ? void 0 : variant.background,
     border: variant === null || variant === void 0 ? void 0 : variant.border,
     borderWidth: variant === null || variant === void 0 ? void 0 : variant.borderWidth,
     borderRadius: rounded ? 'full' : isLarge ? 'medium' : 'small',
@@ -394,7 +418,7 @@ function useButtonStyles(_ref) {
   }];
 }
 
-var _excluded$1 = ["aria-controls", "aria-describedby", "aria-expanded", "aria-label", "data", "disabled", "id", "loading", "onClick", "css", "rounded", "prominence", "size", "tone", "type"];
+var _excluded$1 = ["aria-controls", "aria-describedby", "aria-expanded", "aria-label", "data", "disabled", "id", "loading", "onClick", "css", "rounded", "prominence", "size", "tone", "type", "filled"];
 /**
  * Buttons are used to initialize an action, their label should express what
  * action will occur when the user interacts with it.
@@ -420,6 +444,8 @@ var Button = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
     _ref$tone = _ref.tone,
     tone = _ref$tone === void 0 ? 'primary' : _ref$tone,
     type = _ref.type,
+    _ref$filled = _ref.filled,
+    filled = _ref$filled === void 0 ? false : _ref$filled,
     props = _objectWithoutProperties(_ref, _excluded$1);
   var iconOnly = Boolean(props.label);
   var _useButtonStyles = useButtonStyles({
@@ -427,7 +453,8 @@ var Button = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
       rounded: rounded,
       size: size,
       tone: tone,
-      prominence: prominence
+      prominence: prominence,
+      filled: filled
     }),
     _useButtonStyles2 = _slicedToArray(_useButtonStyles, 3),
     boxProps = _useButtonStyles2[0],

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

@@ -122,14 +122,20 @@ var variants = {
       background: 'primaryDark',
       backgroundHover: 'primaryHover',
       backgroundActive: 'primaryActive'
+    }, highDisabledStyles),
+    dark: _objectSpread({
+      background: 'dark',
+      backgroundHover: 'darkHover',
+      backgroundActive: 'darkActive'
     }, highDisabledStyles)
   },
   low: {
     primary: _objectSpread({
       background: 'surface',
+      backgroundFill: 'primarySoft',
       border: 'primary',
       borderWidth: 'large',
-      textTone: 'primary',
+      textTone: 'neutral',
       backgroundHover: 'none',
       borderHover: 'primaryHover',
       textToneHover: 'primaryHover',
@@ -185,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: {
@@ -235,6 +251,12 @@ var variants = {
       textTone: 'primaryActive',
       backgroundHover: 'primaryLowHover',
       backgroundActive: 'primaryLowActive'
+    }, noneDisabledStyles),
+    dark: _objectSpread({
+      background: 'surface',
+      textTone: 'dark',
+      backgroundHover: 'darkLowHover',
+      backgroundActive: 'darkLowActive'
     }, noneDisabledStyles)
   }
 };
@@ -317,13 +339,15 @@ function HiddenWhenLoading(_ref2) {
  * passed to Emotion's `css` function.
  */
 function useButtonStyles(_ref) {
-  var _theme$components$but, _theme$components, _theme$components2;
+  var _variant$backgroundFi, _theme$components$but, _theme$components, _theme$components2;
   var iconOnly = _ref.iconOnly,
     prominence = _ref.prominence,
     _ref$rounded = _ref.rounded,
     rounded = _ref$rounded === void 0 ? false : _ref$rounded,
     size = _ref.size,
-    tone = _ref.tone;
+    tone = _ref.tone,
+    _ref$filled = _ref.filled,
+    filled = _ref$filled === void 0 ? false : _ref$filled;
   var theme$1 = theme.useTheme();
   var focusRingStyles = a11y.useFocusRing({
     tone: tone,
@@ -341,7 +365,7 @@ function useButtonStyles(_ref) {
   };
   return [{
     alignItems: 'center',
-    background: variant === null || variant === void 0 ? void 0 : variant.background,
+    background: filled ? (_variant$backgroundFi = variant === null || variant === void 0 ? void 0 : variant.backgroundFill) !== null && _variant$backgroundFi !== void 0 ? _variant$backgroundFi : variant === null || variant === void 0 ? void 0 : variant.background : variant === null || variant === void 0 ? void 0 : variant.background,
     border: variant === null || variant === void 0 ? void 0 : variant.border,
     borderWidth: variant === null || variant === void 0 ? void 0 : variant.borderWidth,
     borderRadius: rounded ? 'full' : isLarge ? 'medium' : 'small',
@@ -394,7 +418,7 @@ function useButtonStyles(_ref) {
   }];
 }
 
-var _excluded$1 = ["aria-controls", "aria-describedby", "aria-expanded", "aria-label", "data", "disabled", "id", "loading", "onClick", "css", "rounded", "prominence", "size", "tone", "type"];
+var _excluded$1 = ["aria-controls", "aria-describedby", "aria-expanded", "aria-label", "data", "disabled", "id", "loading", "onClick", "css", "rounded", "prominence", "size", "tone", "type", "filled"];
 /**
  * Buttons are used to initialize an action, their label should express what
  * action will occur when the user interacts with it.
@@ -420,6 +444,8 @@ var Button = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
     _ref$tone = _ref.tone,
     tone = _ref$tone === void 0 ? 'primary' : _ref$tone,
     type = _ref.type,
+    _ref$filled = _ref.filled,
+    filled = _ref$filled === void 0 ? false : _ref$filled,
     props = _objectWithoutProperties(_ref, _excluded$1);
   var iconOnly = Boolean(props.label);
   var _useButtonStyles = useButtonStyles({
@@ -427,7 +453,8 @@ var Button = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
       rounded: rounded,
       size: size,
       tone: tone,
-      prominence: prominence
+      prominence: prominence,
+      filled: filled
     }),
     _useButtonStyles2 = _slicedToArray(_useButtonStyles, 3),
     boxProps = _useButtonStyles2[0],

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

@@ -118,14 +118,20 @@ var variants = {
       background: 'primaryDark',
       backgroundHover: 'primaryHover',
       backgroundActive: 'primaryActive'
+    }, highDisabledStyles),
+    dark: _objectSpread({
+      background: 'dark',
+      backgroundHover: 'darkHover',
+      backgroundActive: 'darkActive'
     }, highDisabledStyles)
   },
   low: {
     primary: _objectSpread({
       background: 'surface',
+      backgroundFill: 'primarySoft',
       border: 'primary',
       borderWidth: 'large',
-      textTone: 'primary',
+      textTone: 'neutral',
       backgroundHover: 'none',
       borderHover: 'primaryHover',
       textToneHover: 'primaryHover',
@@ -181,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: {
@@ -231,6 +247,12 @@ var variants = {
       textTone: 'primaryActive',
       backgroundHover: 'primaryLowHover',
       backgroundActive: 'primaryLowActive'
+    }, noneDisabledStyles),
+    dark: _objectSpread({
+      background: 'surface',
+      textTone: 'dark',
+      backgroundHover: 'darkLowHover',
+      backgroundActive: 'darkLowActive'
     }, noneDisabledStyles)
   }
 };
@@ -313,13 +335,15 @@ function HiddenWhenLoading(_ref2) {
  * passed to Emotion's `css` function.
  */
 function useButtonStyles(_ref) {
-  var _theme$components$but, _theme$components, _theme$components2;
+  var _variant$backgroundFi, _theme$components$but, _theme$components, _theme$components2;
   var iconOnly = _ref.iconOnly,
     prominence = _ref.prominence,
     _ref$rounded = _ref.rounded,
     rounded = _ref$rounded === void 0 ? false : _ref$rounded,
     size = _ref.size,
-    tone = _ref.tone;
+    tone = _ref.tone,
+    _ref$filled = _ref.filled,
+    filled = _ref$filled === void 0 ? false : _ref$filled;
   var theme = useTheme();
   var focusRingStyles = useFocusRing({
     tone: tone,
@@ -337,7 +361,7 @@ function useButtonStyles(_ref) {
   };
   return [{
     alignItems: 'center',
-    background: variant === null || variant === void 0 ? void 0 : variant.background,
+    background: filled ? (_variant$backgroundFi = variant === null || variant === void 0 ? void 0 : variant.backgroundFill) !== null && _variant$backgroundFi !== void 0 ? _variant$backgroundFi : variant === null || variant === void 0 ? void 0 : variant.background : variant === null || variant === void 0 ? void 0 : variant.background,
     border: variant === null || variant === void 0 ? void 0 : variant.border,
     borderWidth: variant === null || variant === void 0 ? void 0 : variant.borderWidth,
     borderRadius: rounded ? 'full' : isLarge ? 'medium' : 'small',
@@ -390,7 +414,7 @@ function useButtonStyles(_ref) {
   }];
 }
 
-var _excluded$1 = ["aria-controls", "aria-describedby", "aria-expanded", "aria-label", "data", "disabled", "id", "loading", "onClick", "css", "rounded", "prominence", "size", "tone", "type"];
+var _excluded$1 = ["aria-controls", "aria-describedby", "aria-expanded", "aria-label", "data", "disabled", "id", "loading", "onClick", "css", "rounded", "prominence", "size", "tone", "type", "filled"];
 /**
  * Buttons are used to initialize an action, their label should express what
  * action will occur when the user interacts with it.
@@ -416,6 +440,8 @@ var Button = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
     _ref$tone = _ref.tone,
     tone = _ref$tone === void 0 ? 'primary' : _ref$tone,
     type = _ref.type,
+    _ref$filled = _ref.filled,
+    filled = _ref$filled === void 0 ? false : _ref$filled,
     props = _objectWithoutProperties(_ref, _excluded$1);
   var iconOnly = Boolean(props.label);
   var _useButtonStyles = useButtonStyles({
@@ -423,7 +449,8 @@ var Button = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
       rounded: rounded,
       size: size,
       tone: tone,
-      prominence: prominence
+      prominence: prominence,
+      filled: filled
     }),
     _useButtonStyles2 = _slicedToArray(_useButtonStyles, 3),
     boxProps = _useButtonStyles2[0],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spark-web/button",
-  "version": "5.3.3",
+  "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.9.0",
+    "@spark-web/theme": "^5.11.1",
     "@spark-web/utils": "^5.0.0"
   },
   "devDependencies": {