@cloudflare/component-button 5.1.0 → 5.3.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # Change Log
 
+## 5.3.0
+
+### Minor Changes
+
+- ebecfbb551: Change inverted styles, add plainDestructive type
+
+### Patch Changes
+
+- 97244e8fe0: Increase transition time
+- d74e81de82: Fix default button hover effect, plainDestructive focus outline color
+
+## 5.2.0
+
+### Minor Changes
+
+- 8dfd2c3a82: Add plain and plainMono button types
+- 658c7bd8b6: Update colors and states, added buttonState prop to lock appearance to a particular state (e.g. hover)
+
 ## 5.1.0
 
 ### Minor Changes

package/dist/Button.d.ts

@@ -2,58 +2,10 @@ import React from 'react';
 import { ThemeProp } from '@cloudflare/style-container';
 import { IconType } from '@cloudflare/component-icon';
 export declare const buttonStyles: (props: PropsWithTheme) => {
-    readonly '&:hover': {
-        backgroundColor: string | undefined;
-        color: string | undefined;
-    } | undefined;
-    readonly '&:active': {
-        backgroundColor: string | undefined;
-        color: string | undefined;
-    } | undefined;
-    readonly '&:focus': {
-        backgroundColor: string | undefined;
-        color: string | undefined;
-    } | undefined;
-    readonly '&:focus-visible': {
-        readonly outlineOffset: 3;
-        readonly outlineStyle: "auto";
-        readonly outlineColor: string;
-    };
-    readonly '&:focus-within:hover': {
-        backgroundColor: string | undefined;
-        color: string | undefined;
-    } | undefined;
-    readonly '&:active:hover': {
-        backgroundColor: string | undefined;
-        color: string | undefined;
-    } | undefined;
-    readonly '&[title]': {
-        readonly pointerEvents: "none" | "auto";
-    };
-    readonly backgroundColor: string | undefined;
-    readonly color: string | undefined;
-    readonly cursor: "default" | "pointer";
-    readonly display: "inline-flex";
-    readonly flexGrow: 1 | undefined;
-    readonly alignItems: "center";
-    readonly justifyContent: "center";
-    readonly fontFamily: "-apple-system, system-ui, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, \"Helvetica Neue\",  Arial, sans-serif";
-    readonly fontSize: 2;
-    readonly fontWeight: 400;
-    readonly lineHeight: 1.2;
-    readonly borderBottomWidth: 0 | "1px";
-    readonly borderLeftWidth: 0 | "1px";
-    readonly borderRightWidth: 0 | "1px";
-    readonly borderTopWidth: 0 | "1px";
-    readonly borderBottomStyle: "solid";
-    readonly borderTopStyle: "solid";
-    readonly borderLeftStyle: "solid";
-    readonly borderRightStyle: "solid";
-    readonly borderColor: string | undefined;
-    readonly borderTopRightRadius: 0 | 5;
-    readonly borderTopLeftRadius: 0 | 5;
-    readonly borderBottomLeftRadius: 0 | 5;
-    readonly borderBottomRightRadius: 0 | 5;
+    readonly borderTopRightRadius: 0 | "4px";
+    readonly borderTopLeftRadius: 0 | "4px";
+    readonly borderBottomLeftRadius: 0 | "4px";
+    readonly borderBottomRightRadius: 0 | "4px";
     readonly '&::before': {
         content: string;
         color: string | undefined;
@@ -84,22 +36,64 @@ export declare const buttonStyles: (props: PropsWithTheme) => {
     readonly pointerEvents: "none" | "auto";
     readonly position: "relative";
     readonly textAlign: "center";
-    readonly transitionProperty: "background-color,border-color" | "background-color,border-color,color";
-    readonly transitionDuration: "200ms";
+    readonly transitionProperty: "all";
+    readonly transitionDuration: "300ms";
     readonly transitionTimingFunction: "ease";
     readonly userSelect: "none";
     readonly maxWidth: "initial";
     readonly float: "none";
     readonly whiteSpace: "normal" | "nowrap";
     readonly width: "auto" | "100%";
+    readonly boxShadow?: string | undefined;
+    readonly '&:focus-visible': {
+        readonly outlineOffset: 3;
+        readonly outlineStyle: "auto";
+        readonly outlineColor: string;
+    };
+    readonly '&[title]': {
+        readonly pointerEvents: "none" | "auto";
+    };
+    readonly backgroundColor: string | undefined;
+    readonly color: string | undefined;
+    readonly cursor: "default" | "pointer";
+    readonly display: "inline-flex";
+    readonly flexGrow: 1 | undefined;
+    readonly alignItems: "center";
+    readonly justifyContent: "center";
+    readonly fontFamily: "-apple-system, system-ui, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, \"Helvetica Neue\",  Arial, sans-serif";
+    readonly fontSize: 2;
+    readonly fontWeight: 400;
+    readonly lineHeight: 1.2;
+    readonly border: "none";
+    readonly '&:focus'?: {
+        backgroundColor: string | undefined;
+        color: string | undefined;
+        boxShadow: string | undefined;
+    } | undefined;
+    readonly '&:hover'?: {
+        backgroundColor: string | undefined;
+        color: string | undefined;
+        boxShadow: string | undefined;
+    } | undefined;
+    readonly '&:active'?: {
+        backgroundColor: string | undefined;
+        color: string | undefined;
+        boxShadow: string | undefined;
+    } | undefined;
+    readonly '&:focus:active'?: {
+        backgroundColor: string | undefined;
+        color: string | undefined;
+        boxShadow: string | undefined;
+    } | undefined;
 };
 declare type Props = {
+    id?: string;
     submit?: boolean;
     spaced?: boolean;
     space?: number;
     direction?: 'column' | 'row';
     group?: 'first' | 'inbetween' | 'last';
-    type?: 'default' | 'primary' | 'success' | 'warning' | 'danger';
+    type?: 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'plain' | 'plainMono' | 'plainDestructive';
     testId?: string;
     loading?: boolean;
     inverted?: boolean;
@@ -110,21 +104,23 @@ declare type Props = {
     ariaLabel?: string;
     stretch?: boolean;
     noWrapText?: boolean;
+    buttonState?: 'hover' | 'active' | 'focus';
 } & Pick<JSX.IntrinsicElements['button'], 'onClick' | 'disabled' | 'form' | 'tabIndex' | 'className'>;
 declare type PropsWithTheme = Props & ThemeProp;
 declare const _default: React.ComponentType<{
     space?: number | undefined;
     disabled?: boolean | undefined;
-    submit?: boolean | undefined;
     form?: string | undefined;
     className?: string | undefined;
+    id?: string | undefined;
     tabIndex?: number | undefined;
-    type?: "default" | "primary" | "success" | "warning" | "danger" | undefined;
+    type?: "default" | "primary" | "success" | "warning" | "danger" | "plain" | "plainMono" | "plainDestructive" | undefined;
     direction?: "column" | "row" | undefined;
     key?: React.Key | null | undefined;
     onClick?: React.MouseEventHandler<HTMLButtonElement> | undefined;
     loading?: boolean | undefined;
     stretch?: boolean | undefined;
+    submit?: boolean | undefined;
     inverted?: boolean | undefined;
     spaced?: boolean | undefined;
     group?: "first" | "last" | "inbetween" | undefined;
@@ -135,6 +131,7 @@ declare const _default: React.ComponentType<{
     iconPosition?: "right" | "left" | undefined;
     ariaLabel?: string | undefined;
     noWrapText?: boolean | undefined;
+    buttonState?: "focus" | "active" | "hover" | undefined;
     color?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
     borderColor?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
     p?: import("csstype").PaddingProperty<string | number> | [import("csstype").PaddingProperty<string | number> | undefined, import("csstype").PaddingProperty<string | number> | undefined] | [import("csstype").PaddingProperty<string | number> | undefined, import("csstype").PaddingProperty<string | number> | undefined, import("csstype").PaddingProperty<string | number> | undefined] | undefined;

package/dist/TextButton.d.ts

@@ -4,11 +4,11 @@ declare const TextButton: import("react").ComponentType<{
     name?: string | undefined;
     disabled?: boolean | undefined;
     color?: (string & (string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined])) | undefined;
-    children?: import("react").ReactNode;
     form?: string | undefined;
     slot?: string | undefined;
     style?: import("react").CSSProperties | undefined;
     title?: string | undefined;
+    children?: import("react").ReactNode;
     value?: string | number | readonly string[] | undefined;
     defaultChecked?: boolean | undefined;
     defaultValue?: string | number | readonly string[] | undefined;
@@ -52,7 +52,7 @@ declare const TextButton: import("react").ComponentType<{
     unselectable?: "on" | "off" | undefined;
     'aria-activedescendant'?: string | undefined;
     'aria-atomic'?: boolean | "true" | "false" | undefined;
-    'aria-autocomplete'?: "none" | "list" | "both" | "inline" | undefined;
+    'aria-autocomplete'?: "inline" | "none" | "list" | "both" | undefined;
     'aria-busy'?: boolean | "true" | "false" | undefined;
     'aria-checked'?: boolean | "true" | "false" | "mixed" | undefined;
     'aria-colcount'?: number | undefined;
@@ -98,7 +98,7 @@ declare const TextButton: import("react").ComponentType<{
     'aria-valuemin'?: number | undefined;
     'aria-valuenow'?: number | undefined;
     'aria-valuetext'?: string | undefined;
-    type?: "reset" | "submit" | "button" | undefined;
+    type?: "button" | "reset" | "submit" | undefined;
     autoFocus?: boolean | undefined;
     formAction?: string | undefined;
     formEncType?: string | undefined;

package/dist/UnstyledButton.d.ts

@@ -4,11 +4,11 @@ declare const UnstyledButton: import("react").ComponentType<{
     name?: string | undefined;
     disabled?: boolean | undefined;
     color?: (string & (string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined])) | undefined;
-    children?: import("react").ReactNode;
     form?: string | undefined;
     slot?: string | undefined;
     style?: import("react").CSSProperties | undefined;
     title?: string | undefined;
+    children?: import("react").ReactNode;
     value?: string | number | readonly string[] | undefined;
     defaultChecked?: boolean | undefined;
     defaultValue?: string | number | readonly string[] | undefined;
@@ -52,7 +52,7 @@ declare const UnstyledButton: import("react").ComponentType<{
     unselectable?: "on" | "off" | undefined;
     'aria-activedescendant'?: string | undefined;
     'aria-atomic'?: boolean | "true" | "false" | undefined;
-    'aria-autocomplete'?: "none" | "list" | "both" | "inline" | undefined;
+    'aria-autocomplete'?: "inline" | "none" | "list" | "both" | undefined;
     'aria-busy'?: boolean | "true" | "false" | undefined;
     'aria-checked'?: boolean | "true" | "false" | "mixed" | undefined;
     'aria-colcount'?: number | undefined;
@@ -98,7 +98,7 @@ declare const UnstyledButton: import("react").ComponentType<{
     'aria-valuemin'?: number | undefined;
     'aria-valuenow'?: number | undefined;
     'aria-valuetext'?: string | undefined;
-    type?: "reset" | "submit" | "button" | undefined;
+    type?: "button" | "reset" | "submit" | undefined;
     autoFocus?: boolean | undefined;
     formAction?: string | undefined;
     formEncType?: string | undefined;

package/es/Button.js

@@ -11,19 +11,25 @@ import PropTypes from 'prop-types';
 import { isDarkMode } from '@cloudflare/style-const';
 import { ariaAttributes, createStyledComponent } from '@cloudflare/style-container';
 import { Icon } from '@cloudflare/component-icon';
+var borderRadius = '4px';
+
+var standardColors = (theme, state) => {
+  var _theme$colors$button$, _theme$colors$button$2, _theme$colors$button$3, _theme$colors$button$4, _theme$colors$button$5, _theme$colors$button$6, _theme$colors$button$7;
 
-var standardColors = theme => {
   var color = theme.colors.gray[9];
   return {
     default: isDarkMode() ? color : theme.colors.gray[1],
-    primary: color,
     success: color,
     warning: color,
-    danger: color,
     inverted: {
-      danger: theme.colors.red[3],
-      primary: theme.colors.blue[3]
-    }
+      danger: (_theme$colors$button$ = theme.colors.button.plainDestructive[state]) === null || _theme$colors$button$ === void 0 ? void 0 : _theme$colors$button$.text,
+      primary: (_theme$colors$button$2 = theme.colors.button.plain[state]) === null || _theme$colors$button$2 === void 0 ? void 0 : _theme$colors$button$2.text
+    },
+    primary: ((_theme$colors$button$3 = theme.colors.button.primary[state]) === null || _theme$colors$button$3 === void 0 ? void 0 : _theme$colors$button$3.text) || color,
+    danger: ((_theme$colors$button$4 = theme.colors.button.danger[state]) === null || _theme$colors$button$4 === void 0 ? void 0 : _theme$colors$button$4.text) || color,
+    plain: ((_theme$colors$button$5 = theme.colors.button.plain[state]) === null || _theme$colors$button$5 === void 0 ? void 0 : _theme$colors$button$5.text) || color,
+    plainMono: ((_theme$colors$button$6 = theme.colors.button.plainMono[state]) === null || _theme$colors$button$6 === void 0 ? void 0 : _theme$colors$button$6.text) || color,
+    plainDestructive: ((_theme$colors$button$7 = theme.colors.button.plainDestructive[state]) === null || _theme$colors$button$7 === void 0 ? void 0 : _theme$colors$button$7.text) || color
   };
 };
 
@@ -35,95 +41,77 @@ var buttonColors = theme => {
     normal: {
       backgroundColor: {
         default: isDarkMode() ? theme.colors.gray[standardIndex] : theme.colors.gray[8],
-        primary: theme.colors.blue[standardIndex],
+        primary: theme.colors.button.primary.normal.background,
         success: theme.colors.green[standardIndex],
         warning: theme.colors.orange[standardIndex],
-        danger: theme.colors.red[standardIndex],
+        danger: theme.colors.button.danger.normal.background,
         inverted: {
-          danger: 'transparent',
-          primary: 'transparent'
-        }
+          danger: theme.colors.button.plainDestructive.normal.background,
+          primary: theme.colors.button.plain.normal.background
+        },
+        plain: theme.colors.button.plain.normal.background,
+        plainMono: theme.colors.button.plainMono.normal.background,
+        plainDestructive: theme.colors.button.plainDestructive.normal.background
       },
-      color: standardColors(theme)
+      color: standardColors(theme, 'normal')
     },
     // Hover
     hover: {
       backgroundColor: {
         default: theme.colors.gray[isDarkMode() ? 2 : 7],
-        primary: theme.colors.blue[hoverIndex],
+        primary: theme.colors.button.primary.hover.background,
         success: theme.colors.green[hoverIndex],
         warning: theme.colors.orange[hoverIndex],
-        danger: theme.colors.red[hoverIndex],
+        danger: theme.colors.button.danger.hover.background,
         inverted: {
-          danger: theme.colors.red[hoverIndex],
-          primary: theme.colors.blue[hoverIndex]
-        }
+          danger: theme.colors.button.plainDestructive.hover.background,
+          primary: theme.colors.button.plain.hover.background
+        },
+        plain: theme.colors.button.plain.hover.background,
+        plainMono: theme.colors.button.plainMono.hover.background,
+        plainDestructive: theme.colors.button.plainDestructive.hover.background
       },
-      color: _objectSpread(_objectSpread({}, standardColors(theme)), {}, {
-        inverted: {
-          danger: theme.colors.white,
-          primary: theme.colors.white
-        }
-      })
+      color: standardColors(theme, 'hover')
     },
     // Active
     active: {
       backgroundColor: {
-        default: theme.colors.gray[isDarkMode() ? 3 : 8],
-        primary: theme.colors.blue[standardIndex],
+        default: theme.colors.gray[isDarkMode() ? 3 : 6],
+        primary: theme.colors.button.primary.active.background,
         success: theme.colors.green[standardIndex],
         warning: theme.colors.orange[standardIndex],
-        danger: theme.colors.red[standardIndex],
+        danger: theme.colors.button.danger.active.background,
         inverted: {
-          danger: theme.colors.red[standardIndex],
-          primary: theme.colors.blue[standardIndex]
-        }
+          danger: theme.colors.button.plainDestructive.active.background,
+          primary: theme.colors.button.plain.active.background
+        },
+        plain: theme.colors.button.plain.active.background,
+        plainMono: theme.colors.button.plainMono.active.background,
+        plainDestructive: theme.colors.button.plainDestructive.active.background
       },
-      color: _objectSpread(_objectSpread({}, standardColors(theme)), {}, {
-        inverted: {
-          danger: theme.colors.gray[9],
-          primary: theme.colors.gray[9]
-        }
-      })
+      color: standardColors(theme, 'active')
     },
     // Focus
     focus: {
       backgroundColor: {
-        default: theme.colors.gray[isDarkMode() ? 3 : 8],
-        primary: theme.colors.blue[standardIndex],
+        default: theme.colors.gray[isDarkMode() ? 2 : 7],
+        primary: theme.colors.button.primary.focus.background,
         success: theme.colors.green[standardIndex],
         warning: theme.colors.orange[standardIndex],
-        danger: theme.colors.red[standardIndex],
+        danger: theme.colors.button.danger.focus.background,
         inverted: {
-          danger: 'transparent',
-          primary: 'transparent'
-        }
+          danger: theme.colors.button.plainDestructive.focus.background,
+          primary: theme.colors.button.plain.focus.background
+        },
+        plain: theme.colors.button.plain.focus.background,
+        plainMono: theme.colors.button.plainMono.focus.background,
+        plainDestructive: theme.colors.button.plainDestructive.focus.background
       },
-      color: standardColors(theme)
+      color: standardColors(theme, 'focus')
     }
   };
 };
 
-var getFocusOutlineColor = (theme, type, inverted) => {
-  var _invertedOutlines$typ;
-
-  var standardIndex = isDarkMode() ? 3 : 4;
-  var FOCUS_OFFSET_INDEX = 2;
-  var focusIndex = standardIndex - FOCUS_OFFSET_INDEX;
-  var outlines = {
-    default: isDarkMode() ? theme.colors.gray[focusIndex] : theme.colors.gray[8 - FOCUS_OFFSET_INDEX],
-    primary: theme.colors.blue[focusIndex],
-    success: theme.colors.green[focusIndex],
-    warning: theme.colors.orange[focusIndex],
-    danger: theme.colors.red[focusIndex]
-  };
-  var invertedOutlines = {
-    danger: theme.colors.red[focusIndex],
-    primary: theme.colors.blue[focusIndex]
-  };
-  return inverted ? (_invertedOutlines$typ = invertedOutlines[type]) !== null && _invertedOutlines$typ !== void 0 ? _invertedOutlines$typ : outlines[type] : outlines[type];
-};
-
 var colorAccessor = (property, _ref) => {
   var {
     inverted = false,
@@ -140,46 +128,55 @@ var interactionStyleAccessor = (interactionState, props) => {
   } = props;
   var isInteractive = !(loading || disabled);
   var stateStyles = buttonColors(theme)[interactionState];
+  var color = colorAccessor(stateStyles.color, props);
+  var backgroundColor = colorAccessor(stateStyles.backgroundColor, props);
   return isInteractive ? {
-    backgroundColor: colorAccessor(stateStyles.backgroundColor, props),
-    color: colorAccessor(stateStyles.color, props)
+    backgroundColor,
+    color,
+    boxShadow: props.inverted ? "inset 0px 0px 0px 1px ".concat(color) : undefined
   } : undefined;
 };
 
 export var buttonStyles = props => {
+  var _styles$buttonState, _styles$buttonState2;
+
   var {
     theme,
     loading = false,
     disabled,
     direction,
-    inverted = false,
     group,
     spaced,
     space = 2,
     type = 'default',
     stretch,
-    noWrapText
+    noWrapText,
+    buttonState
   } = props;
-  var normalStyles = buttonColors(theme).normal;
-  var hoverStyles = interactionStyleAccessor('hover', props);
-  var activeStyles = interactionStyleAccessor('active', props);
-  var focusStyles = interactionStyleAccessor('focus', props);
-  return {
-    '&:hover': hoverStyles,
-    '&:active': activeStyles,
-    '&:focus': focusStyles,
+  var styles = {
+    normal: buttonColors(theme).normal,
+    hover: interactionStyleAccessor('hover', props),
+    active: interactionStyleAccessor('active', props),
+    focus: interactionStyleAccessor('focus', props)
+  };
+  var color = buttonState && styles[buttonState] ? (_styles$buttonState = styles[buttonState]) === null || _styles$buttonState === void 0 ? void 0 : _styles$buttonState.color : colorAccessor(styles.normal.color, props);
+  var backgroundColor = buttonState && styles[buttonState] ? (_styles$buttonState2 = styles[buttonState]) === null || _styles$buttonState2 === void 0 ? void 0 : _styles$buttonState2.backgroundColor : colorAccessor(styles.normal.backgroundColor, props);
+  return _objectSpread(_objectSpread(_objectSpread({}, buttonState ? {} : {
+    '&:focus': styles.focus,
+    '&:hover': styles.hover,
+    '&:active': styles.active,
+    '&:focus:active': styles.active
+  }), {}, {
     '&:focus-visible': {
       outlineOffset: 3,
       outlineStyle: 'auto',
-      outlineColor: getFocusOutlineColor(theme, type, inverted)
+      outlineColor: type === 'danger' || type === 'plainDestructive' ? theme.colors.red[isDarkMode() ? 3 : 4] : theme.colors.focus
     },
-    '&:focus-within:hover': focusStyles,
-    '&:active:hover': activeStyles,
     '&[title]': {
       pointerEvents: disabled ? 'auto' : 'none'
     },
-    backgroundColor: colorAccessor(normalStyles.backgroundColor, props),
-    color: loading ? 'transparent' : colorAccessor(normalStyles.color, props),
+    backgroundColor,
+    color: loading ? 'transparent' : color,
     cursor: disabled || loading ? 'default' : 'pointer',
     display: 'inline-flex',
     flexGrow: stretch ? 1 : undefined,
@@ -189,22 +186,17 @@ export var buttonStyles = props => {
     fontSize: 2,
     fontWeight: 400,
     lineHeight: 1.2,
-    borderBottomWidth: inverted ? '1px' : 0,
-    borderLeftWidth: inverted ? '1px' : 0,
-    borderRightWidth: inverted ? '1px' : 0,
-    borderTopWidth: inverted ? '1px' : 0,
-    borderBottomStyle: 'solid',
-    borderTopStyle: 'solid',
-    borderLeftStyle: 'solid',
-    borderRightStyle: 'solid',
-    borderColor: inverted ? colorAccessor(normalStyles.color, props) : 'currentColor',
-    borderTopRightRadius: (group === 'first' || group === 'inbetween') && !spaced ? 0 : theme.radii[2],
-    borderTopLeftRadius: (group === 'last' || group === 'inbetween') && !spaced ? 0 : theme.radii[2],
-    borderBottomLeftRadius: (group === 'last' || group === 'inbetween') && !spaced ? 0 : theme.radii[2],
-    borderBottomRightRadius: (group === 'first' || group === 'inbetween') && !spaced ? 0 : theme.radii[2],
+    border: 'none'
+  }, props.inverted ? {
+    boxShadow: "inset 0px 0px 0px 1px ".concat(color)
+  } : {}), {}, {
+    borderTopRightRadius: (group === 'first' || group === 'inbetween') && !spaced ? 0 : borderRadius,
+    borderTopLeftRadius: (group === 'last' || group === 'inbetween') && !spaced ? 0 : borderRadius,
+    borderBottomLeftRadius: (group === 'last' || group === 'inbetween') && !spaced ? 0 : borderRadius,
+    borderBottomRightRadius: (group === 'first' || group === 'inbetween') && !spaced ? 0 : borderRadius,
     '&::before': loading ? {
       content: '"•••"',
-      color: colorAccessor(normalStyles.color, props),
+      color,
       display: 'flex',
       alignItems: 'center',
       justifyContent: 'center',
@@ -232,18 +224,19 @@ export var buttonStyles = props => {
     pointerEvents: disabled ? 'none' : 'auto',
     position: 'relative',
     textAlign: 'center',
-    transitionProperty: loading ? 'background-color,border-color' : 'background-color,border-color,color',
-    transitionDuration: '200ms',
+    transitionProperty: 'all',
+    transitionDuration: '300ms',
     transitionTimingFunction: 'ease',
     userSelect: 'none',
     maxWidth: 'initial',
     float: 'none',
     whiteSpace: noWrapText ? 'nowrap' : 'normal',
     width: direction === 'column' ? '100%' : 'auto'
-  };
+  });
 };
 var Button = /*#__PURE__*/React.forwardRef((props, ref) => {
   var {
+    id,
     submit = false,
     className,
     disabled,
@@ -263,6 +256,7 @@ var Button = /*#__PURE__*/React.forwardRef((props, ref) => {
     [propName]: props[propName]
   }), {});
   return /*#__PURE__*/React.createElement("button", _extends({}, ariaAndDataProps, {
+    id: id,
     type: submit ? 'submit' : 'button',
     "data-testid": testId,
     disabled: disabled || loading,
@@ -285,6 +279,7 @@ var Button = /*#__PURE__*/React.forwardRef((props, ref) => {
   }));
 });
 Button.propTypes = {
+  id: PropTypes.string,
   onClick: PropTypes.func,
   submit: PropTypes.bool,
   spaced: PropTypes.bool,
@@ -292,7 +287,7 @@ Button.propTypes = {
   direction: PropTypes.oneOf(['column', 'row']),
   className: PropTypes.string,
   group: PropTypes.oneOf(['first', 'inbetween', 'last']),
-  type: PropTypes.oneOf(['default', 'primary', 'success', 'warning', 'danger']),
+  type: PropTypes.oneOf(['default', 'primary', 'success', 'warning', 'danger', 'plain', 'plainMono', 'plainDestructive']),
   testId: PropTypes.string,
   disabled: PropTypes.bool,
   loading: PropTypes.bool,
@@ -304,7 +299,8 @@ Button.propTypes = {
   tabIndex: PropTypes.number,
   ariaLabel: PropTypes.string,
   stretch: PropTypes.bool,
-  noWrapText: PropTypes.bool
+  noWrapText: PropTypes.bool,
+  buttonState: PropTypes.oneOf(['hover', 'active', 'focus'])
 };
 Button.displayName = 'Button';
 export default createStyledComponent(buttonStyles, Button);

package/es/UnstyledButton.js

@@ -8,13 +8,15 @@ import { createStyledComponent } from '@cloudflare/style-container';
 var UnstyledButton = createStyledComponent(_ref => {
   var {
     theme,
-    focus
+    focus,
+    disabled
   } = _ref;
   return _objectSpread({
     background: 'none',
     color: 'inherit',
     border: 'none',
     padding: 0,
+    opacity: disabled ? 0.5 : undefined,
     font: 'inherit',
     cursor: 'pointer',
     outline: 'inherit'

package/lib/Button.js

@@ -25,18 +25,25 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-var standardColors = function standardColors(theme) {
+var borderRadius = '4px';
+
+var standardColors = function standardColors(theme, state) {
+  var _theme$colors$button$, _theme$colors$button$2, _theme$colors$button$3, _theme$colors$button$4, _theme$colors$button$5, _theme$colors$button$6, _theme$colors$button$7;
+
   var color = theme.colors.gray[9];
   return {
     default: (0, _styleConst.isDarkMode)() ? color : theme.colors.gray[1],
-    primary: color,
     success: color,
     warning: color,
-    danger: color,
     inverted: {
-      danger: theme.colors.red[3],
-      primary: theme.colors.blue[3]
-    }
+      danger: (_theme$colors$button$ = theme.colors.button.plainDestructive[state]) === null || _theme$colors$button$ === void 0 ? void 0 : _theme$colors$button$.text,
+      primary: (_theme$colors$button$2 = theme.colors.button.plain[state]) === null || _theme$colors$button$2 === void 0 ? void 0 : _theme$colors$button$2.text
+    },
+    primary: ((_theme$colors$button$3 = theme.colors.button.primary[state]) === null || _theme$colors$button$3 === void 0 ? void 0 : _theme$colors$button$3.text) || color,
+    danger: ((_theme$colors$button$4 = theme.colors.button.danger[state]) === null || _theme$colors$button$4 === void 0 ? void 0 : _theme$colors$button$4.text) || color,
+    plain: ((_theme$colors$button$5 = theme.colors.button.plain[state]) === null || _theme$colors$button$5 === void 0 ? void 0 : _theme$colors$button$5.text) || color,
+    plainMono: ((_theme$colors$button$6 = theme.colors.button.plainMono[state]) === null || _theme$colors$button$6 === void 0 ? void 0 : _theme$colors$button$6.text) || color,
+    plainDestructive: ((_theme$colors$button$7 = theme.colors.button.plainDestructive[state]) === null || _theme$colors$button$7 === void 0 ? void 0 : _theme$colors$button$7.text) || color
   };
 };
 
@@ -48,95 +55,77 @@ var buttonColors = function buttonColors(theme) {
     normal: {
       backgroundColor: {
         default: (0, _styleConst.isDarkMode)() ? theme.colors.gray[standardIndex] : theme.colors.gray[8],
-        primary: theme.colors.blue[standardIndex],
+        primary: theme.colors.button.primary.normal.background,
         success: theme.colors.green[standardIndex],
         warning: theme.colors.orange[standardIndex],
-        danger: theme.colors.red[standardIndex],
+        danger: theme.colors.button.danger.normal.background,
         inverted: {
-          danger: 'transparent',
-          primary: 'transparent'
-        }
+          danger: theme.colors.button.plainDestructive.normal.background,
+          primary: theme.colors.button.plain.normal.background
+        },
+        plain: theme.colors.button.plain.normal.background,
+        plainMono: theme.colors.button.plainMono.normal.background,
+        plainDestructive: theme.colors.button.plainDestructive.normal.background
       },
-      color: standardColors(theme)
+      color: standardColors(theme, 'normal')
     },
     // Hover
     hover: {
       backgroundColor: {
         default: theme.colors.gray[(0, _styleConst.isDarkMode)() ? 2 : 7],
-        primary: theme.colors.blue[hoverIndex],
+        primary: theme.colors.button.primary.hover.background,
         success: theme.colors.green[hoverIndex],
         warning: theme.colors.orange[hoverIndex],
-        danger: theme.colors.red[hoverIndex],
+        danger: theme.colors.button.danger.hover.background,
         inverted: {
-          danger: theme.colors.red[hoverIndex],
-          primary: theme.colors.blue[hoverIndex]
-        }
+          danger: theme.colors.button.plainDestructive.hover.background,
+          primary: theme.colors.button.plain.hover.background
+        },
+        plain: theme.colors.button.plain.hover.background,
+        plainMono: theme.colors.button.plainMono.hover.background,
+        plainDestructive: theme.colors.button.plainDestructive.hover.background
       },
-      color: _objectSpread(_objectSpread({}, standardColors(theme)), {}, {
-        inverted: {
-          danger: theme.colors.white,
-          primary: theme.colors.white
-        }
-      })
+      color: standardColors(theme, 'hover')
     },
     // Active
     active: {
       backgroundColor: {
-        default: theme.colors.gray[(0, _styleConst.isDarkMode)() ? 3 : 8],
-        primary: theme.colors.blue[standardIndex],
+        default: theme.colors.gray[(0, _styleConst.isDarkMode)() ? 3 : 6],
+        primary: theme.colors.button.primary.active.background,
         success: theme.colors.green[standardIndex],
         warning: theme.colors.orange[standardIndex],
-        danger: theme.colors.red[standardIndex],
+        danger: theme.colors.button.danger.active.background,
         inverted: {
-          danger: theme.colors.red[standardIndex],
-          primary: theme.colors.blue[standardIndex]
-        }
+          danger: theme.colors.button.plainDestructive.active.background,
+          primary: theme.colors.button.plain.active.background
+        },
+        plain: theme.colors.button.plain.active.background,
+        plainMono: theme.colors.button.plainMono.active.background,
+        plainDestructive: theme.colors.button.plainDestructive.active.background
       },
-      color: _objectSpread(_objectSpread({}, standardColors(theme)), {}, {
-        inverted: {
-          danger: theme.colors.gray[9],
-          primary: theme.colors.gray[9]
-        }
-      })
+      color: standardColors(theme, 'active')
     },
     // Focus
     focus: {
       backgroundColor: {
-        default: theme.colors.gray[(0, _styleConst.isDarkMode)() ? 3 : 8],
-        primary: theme.colors.blue[standardIndex],
+        default: theme.colors.gray[(0, _styleConst.isDarkMode)() ? 2 : 7],
+        primary: theme.colors.button.primary.focus.background,
         success: theme.colors.green[standardIndex],
         warning: theme.colors.orange[standardIndex],
-        danger: theme.colors.red[standardIndex],
+        danger: theme.colors.button.danger.focus.background,
         inverted: {
-          danger: 'transparent',
-          primary: 'transparent'
-        }
+          danger: theme.colors.button.plainDestructive.focus.background,
+          primary: theme.colors.button.plain.focus.background
+        },
+        plain: theme.colors.button.plain.focus.background,
+        plainMono: theme.colors.button.plainMono.focus.background,
+        plainDestructive: theme.colors.button.plainDestructive.focus.background
       },
-      color: standardColors(theme)
+      color: standardColors(theme, 'focus')
     }
   };
 };
 
-var getFocusOutlineColor = function getFocusOutlineColor(theme, type, inverted) {
-  var _invertedOutlines$typ;
-
-  var standardIndex = (0, _styleConst.isDarkMode)() ? 3 : 4;
-  var FOCUS_OFFSET_INDEX = 2;
-  var focusIndex = standardIndex - FOCUS_OFFSET_INDEX;
-  var outlines = {
-    default: (0, _styleConst.isDarkMode)() ? theme.colors.gray[focusIndex] : theme.colors.gray[8 - FOCUS_OFFSET_INDEX],
-    primary: theme.colors.blue[focusIndex],
-    success: theme.colors.green[focusIndex],
-    warning: theme.colors.orange[focusIndex],
-    danger: theme.colors.red[focusIndex]
-  };
-  var invertedOutlines = {
-    danger: theme.colors.red[focusIndex],
-    primary: theme.colors.blue[focusIndex]
-  };
-  return inverted ? (_invertedOutlines$typ = invertedOutlines[type]) !== null && _invertedOutlines$typ !== void 0 ? _invertedOutlines$typ : outlines[type] : outlines[type];
-};
-
 var colorAccessor = function colorAccessor(property, _ref) {
   var _ref$inverted = _ref.inverted,
       inverted = _ref$inverted === void 0 ? false : _ref$inverted,
@@ -151,20 +140,23 @@ var interactionStyleAccessor = function interactionStyleAccessor(interactionStat
       disabled = props.disabled;
   var isInteractive = !(loading || disabled);
   var stateStyles = buttonColors(theme)[interactionState];
+  var color = colorAccessor(stateStyles.color, props);
+  var backgroundColor = colorAccessor(stateStyles.backgroundColor, props);
   return isInteractive ? {
-    backgroundColor: colorAccessor(stateStyles.backgroundColor, props),
-    color: colorAccessor(stateStyles.color, props)
+    backgroundColor: backgroundColor,
+    color: color,
+    boxShadow: props.inverted ? "inset 0px 0px 0px 1px ".concat(color) : undefined
   } : undefined;
 };
 
 var buttonStyles = function buttonStyles(props) {
+  var _styles$buttonState, _styles$buttonState2;
+
   var theme = props.theme,
       _props$loading = props.loading,
       loading = _props$loading === void 0 ? false : _props$loading,
       disabled = props.disabled,
       direction = props.direction,
-      _props$inverted = props.inverted,
-      inverted = _props$inverted === void 0 ? false : _props$inverted,
       group = props.group,
       spaced = props.spaced,
       _props$space = props.space,
@@ -172,27 +164,32 @@ var buttonStyles = function buttonStyles(props) {
       _props$type = props.type,
       type = _props$type === void 0 ? 'default' : _props$type,
       stretch = props.stretch,
-      noWrapText = props.noWrapText;
-  var normalStyles = buttonColors(theme).normal;
-  var hoverStyles = interactionStyleAccessor('hover', props);
-  var activeStyles = interactionStyleAccessor('active', props);
-  var focusStyles = interactionStyleAccessor('focus', props);
-  return {
-    '&:hover': hoverStyles,
-    '&:active': activeStyles,
-    '&:focus': focusStyles,
+      noWrapText = props.noWrapText,
+      buttonState = props.buttonState;
+  var styles = {
+    normal: buttonColors(theme).normal,
+    hover: interactionStyleAccessor('hover', props),
+    active: interactionStyleAccessor('active', props),
+    focus: interactionStyleAccessor('focus', props)
+  };
+  var color = buttonState && styles[buttonState] ? (_styles$buttonState = styles[buttonState]) === null || _styles$buttonState === void 0 ? void 0 : _styles$buttonState.color : colorAccessor(styles.normal.color, props);
+  var backgroundColor = buttonState && styles[buttonState] ? (_styles$buttonState2 = styles[buttonState]) === null || _styles$buttonState2 === void 0 ? void 0 : _styles$buttonState2.backgroundColor : colorAccessor(styles.normal.backgroundColor, props);
+  return _objectSpread(_objectSpread(_objectSpread({}, buttonState ? {} : {
+    '&:focus': styles.focus,
+    '&:hover': styles.hover,
+    '&:active': styles.active,
+    '&:focus:active': styles.active
+  }), {}, {
     '&:focus-visible': {
       outlineOffset: 3,
       outlineStyle: 'auto',
-      outlineColor: getFocusOutlineColor(theme, type, inverted)
+      outlineColor: type === 'danger' || type === 'plainDestructive' ? theme.colors.red[(0, _styleConst.isDarkMode)() ? 3 : 4] : theme.colors.focus
     },
-    '&:focus-within:hover': focusStyles,
-    '&:active:hover': activeStyles,
     '&[title]': {
       pointerEvents: disabled ? 'auto' : 'none'
     },
-    backgroundColor: colorAccessor(normalStyles.backgroundColor, props),
-    color: loading ? 'transparent' : colorAccessor(normalStyles.color, props),
+    backgroundColor: backgroundColor,
+    color: loading ? 'transparent' : color,
     cursor: disabled || loading ? 'default' : 'pointer',
     display: 'inline-flex',
     flexGrow: stretch ? 1 : undefined,
@@ -202,22 +199,17 @@ var buttonStyles = function buttonStyles(props) {
     fontSize: 2,
     fontWeight: 400,
     lineHeight: 1.2,
-    borderBottomWidth: inverted ? '1px' : 0,
-    borderLeftWidth: inverted ? '1px' : 0,
-    borderRightWidth: inverted ? '1px' : 0,
-    borderTopWidth: inverted ? '1px' : 0,
-    borderBottomStyle: 'solid',
-    borderTopStyle: 'solid',
-    borderLeftStyle: 'solid',
-    borderRightStyle: 'solid',
-    borderColor: inverted ? colorAccessor(normalStyles.color, props) : 'currentColor',
-    borderTopRightRadius: (group === 'first' || group === 'inbetween') && !spaced ? 0 : theme.radii[2],
-    borderTopLeftRadius: (group === 'last' || group === 'inbetween') && !spaced ? 0 : theme.radii[2],
-    borderBottomLeftRadius: (group === 'last' || group === 'inbetween') && !spaced ? 0 : theme.radii[2],
-    borderBottomRightRadius: (group === 'first' || group === 'inbetween') && !spaced ? 0 : theme.radii[2],
+    border: 'none'
+  }, props.inverted ? {
+    boxShadow: "inset 0px 0px 0px 1px ".concat(color)
+  } : {}), {}, {
+    borderTopRightRadius: (group === 'first' || group === 'inbetween') && !spaced ? 0 : borderRadius,
+    borderTopLeftRadius: (group === 'last' || group === 'inbetween') && !spaced ? 0 : borderRadius,
+    borderBottomLeftRadius: (group === 'last' || group === 'inbetween') && !spaced ? 0 : borderRadius,
+    borderBottomRightRadius: (group === 'first' || group === 'inbetween') && !spaced ? 0 : borderRadius,
     '&::before': loading ? {
       content: '"•••"',
-      color: colorAccessor(normalStyles.color, props),
+      color: color,
       display: 'flex',
       alignItems: 'center',
       justifyContent: 'center',
@@ -245,21 +237,22 @@ var buttonStyles = function buttonStyles(props) {
     pointerEvents: disabled ? 'none' : 'auto',
     position: 'relative',
     textAlign: 'center',
-    transitionProperty: loading ? 'background-color,border-color' : 'background-color,border-color,color',
-    transitionDuration: '200ms',
+    transitionProperty: 'all',
+    transitionDuration: '300ms',
     transitionTimingFunction: 'ease',
     userSelect: 'none',
     maxWidth: 'initial',
     float: 'none',
     whiteSpace: noWrapText ? 'nowrap' : 'normal',
     width: direction === 'column' ? '100%' : 'auto'
-  };
+  });
 };
 
 exports.buttonStyles = buttonStyles;
 
 var Button = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
-  var _props$submit = props.submit,
+  var id = props.id,
+      _props$submit = props.submit,
       submit = _props$submit === void 0 ? false : _props$submit,
       className = props.className,
       disabled = props.disabled,
@@ -282,6 +275,7 @@ var Button = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     return _objectSpread(_objectSpread({}, memo), {}, _defineProperty({}, propName, props[propName]));
   }, {});
   return /*#__PURE__*/_react.default.createElement("button", _extends({}, ariaAndDataProps, {
+    id: id,
     type: submit ? 'submit' : 'button',
     "data-testid": testId,
     disabled: disabled || loading,
@@ -305,6 +299,7 @@ var Button = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
 });
 
 Button.propTypes = {
+  id: _propTypes.default.string,
   onClick: _propTypes.default.func,
   submit: _propTypes.default.bool,
   spaced: _propTypes.default.bool,
@@ -312,7 +307,7 @@ Button.propTypes = {
   direction: _propTypes.default.oneOf(['column', 'row']),
   className: _propTypes.default.string,
   group: _propTypes.default.oneOf(['first', 'inbetween', 'last']),
-  type: _propTypes.default.oneOf(['default', 'primary', 'success', 'warning', 'danger']),
+  type: _propTypes.default.oneOf(['default', 'primary', 'success', 'warning', 'danger', 'plain', 'plainMono', 'plainDestructive']),
   testId: _propTypes.default.string,
   disabled: _propTypes.default.bool,
   loading: _propTypes.default.bool,
@@ -324,7 +319,8 @@ Button.propTypes = {
   tabIndex: _propTypes.default.number,
   ariaLabel: _propTypes.default.string,
   stretch: _propTypes.default.bool,
-  noWrapText: _propTypes.default.bool
+  noWrapText: _propTypes.default.bool,
+  buttonState: _propTypes.default.oneOf(['hover', 'active', 'focus'])
 };
 Button.displayName = 'Button';
 

package/lib/UnstyledButton.js

@@ -15,12 +15,14 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 
 var UnstyledButton = (0, _styleContainer.createStyledComponent)(function (_ref) {
   var theme = _ref.theme,
-      focus = _ref.focus;
+      focus = _ref.focus,
+      disabled = _ref.disabled;
   return _objectSpread({
     background: 'none',
     color: 'inherit',
     border: 'none',
     padding: 0,
+    opacity: disabled ? 0.5 : undefined,
     font: 'inherit',
     cursor: 'pointer',
     outline: 'inherit'

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudflare/component-button",
   "description": "Cloudflare Button Component",
-  "version": "5.1.0",
+  "version": "5.3.0",
   "main": "lib/index.js",
   "module": "es/index.js",
   "author": "James Kyle <jkyle@cloudflare.com>",