@via-profit/ui-kit 0.4.0 → 0.5.0

package/Accordion/AccordionContainer.js

@@ -39,6 +39,7 @@ const StyledAccordionContainer = styled_1.default.div `
     ? theme.color.backgroundSecondary.lighten(80).alpha(0.12).toString()
     : theme.color.backgroundSecondary.lighten(50).alpha(0.12).toString()}
       0px 1px 3px 0px;
+  ${({ theme }) => theme.elevation.surface && `box-shadow: ${theme.elevation.surface};`}
 
   /*
    * Adjacent accordions form a group: the inner corners are square.

package/Accordion/AccordionHeader.js

@@ -17,6 +17,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
 const Chevron_1 = __importDefault(require("./Chevron"));
+const tokens_1 = require("../ThemeProvider/tokens");
 const StyledHeader = styled_1.default.div `
   font-size: 1.3rem;
   font-weight: 600;
@@ -47,6 +48,7 @@ const HeaderButton = styled_1.default.button `
     outline: 0.1em solid ${({ theme }) => theme.color.accentPrimary.toString()};
     outline-offset: -0.1em;
   }
+  ${({ theme }) => (0, tokens_1.themeFocusRing)(theme)}
 `;
 const HeaderCell = styled_1.default.span `
   flex: 1;

package/Accordion/index.js

@@ -42,8 +42,9 @@ const AccordionContainer_1 = __importDefault(require("./AccordionContainer"));
 const AccordionHeader_1 = __importDefault(require("./AccordionHeader"));
 const AccordionContent_1 = __importDefault(require("./AccordionContent"));
 const AccordionActions_1 = __importDefault(require("./AccordionActions"));
+const useThemeProps_1 = __importDefault(require("../ThemeProvider/useThemeProps"));
 const Accordion = (props, ref) => {
-    const { children, header, actions, isOpen, onOpen, overrides, noPadding, defaultOpened } = props, nativeProps = __rest(props, ["children", "header", "actions", "isOpen", "onOpen", "overrides", "noPadding", "defaultOpened"]);
+    const _a = (0, useThemeProps_1.default)('Accordion', props), { children, header, actions, isOpen, onOpen, overrides, noPadding, defaultOpened } = _a, nativeProps = __rest(_a, ["children", "header", "actions", "isOpen", "onOpen", "overrides", "noPadding", "defaultOpened"]);
     const hasActions = typeof actions !== 'undefined' && actions !== null;
     const hasHeader = typeof header !== 'undefined' && header !== null;
     const [internalOpened, setInternalOpened] = React.useState(Boolean(defaultOpened));

package/Avatar/AvatarPicture.d.ts

@@ -53,7 +53,7 @@ declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTM
      * \
      * **Default**: `circular`
      */
-    readonly variant?: "square" | "circular" | "rounded" | undefined;
+    readonly variant?: "square" | "rounded" | "circular" | undefined;
     /**
      * HTML image alt attribute
      */

package/Avatar/index.js

@@ -19,6 +19,7 @@ const styled_1 = __importDefault(require("@emotion/styled"));
 const react_2 = require("@emotion/react");
 const Color_1 = __importDefault(require("../Color"));
 const AvatarBase_1 = __importDefault(require("./AvatarBase"));
+const useThemeProps_1 = __importDefault(require("../ThemeProvider/useThemeProps"));
 const StyledAvatarBase = (0, styled_1.default)(AvatarBase_1.default) `
   position: relative;
   color: ${({ $color }) => $color.toString()};
@@ -54,7 +55,7 @@ const StyledAvatarBase = (0, styled_1.default)(AvatarBase_1.default) `
 }}
 `;
 const Avatar = (props, ref) => {
-    const { children, color, onClick, onKeyDown, isOnline, size, src, variant = 'circular', alt, overrides } = props, restProps = __rest(props, ["children", "color", "onClick", "onKeyDown", "isOnline", "size", "src", "variant", "alt", "overrides"]);
+    const _a = (0, useThemeProps_1.default)('Avatar', props), { children, color, onClick, onKeyDown, isOnline, size, src, variant = 'circular', alt, overrides } = _a, restProps = __rest(_a, ["children", "color", "onClick", "onKeyDown", "isOnline", "size", "src", "variant", "alt", "overrides"]);
     const theme = (0, react_2.useTheme)();
     const clickable = react_1.default.useMemo(() => typeof onClick === 'function', [onClick]);
     // A clickable avatar acts as a button, so it is activated by Enter and Space too

package/Badge/BadgeStyled.js

@@ -19,6 +19,7 @@ const styled_1 = __importDefault(require("@emotion/styled"));
 const react_2 = require("@emotion/react");
 const Color_1 = __importDefault(require("../Color"));
 const BadgeBase_1 = __importDefault(require("./BadgeBase"));
+const tokens_1 = require("../ThemeProvider/tokens");
 const parseColor = (color, fallback) => {
     try {
         return Color_1.default.fromString(color);
@@ -115,6 +116,7 @@ const StyledBadge = (0, styled_1.default)(BadgeBase_1.default) `
             `}
       }
     `}
+  ${({ theme }) => (0, tokens_1.themeFocusRing)(theme)}
 `;
 const BadgeStyled = (props, ref) => {
     const { children, color, variant = 'standard', onClick } = props, restProps = __rest(props, ["children", "color", "variant", "onClick"]);

package/Badge/index.js

@@ -5,6 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const BadgeStyled_1 = __importDefault(require("./BadgeStyled"));
+const useThemeProps_1 = __importDefault(require("../ThemeProvider/useThemeProps"));
 // One component for both variants, so changing the variant does not remount the badge
-const Badge = (props, ref) => (react_1.default.createElement(BadgeStyled_1.default, Object.assign({}, props, { ref: ref })));
+const Badge = (props, ref) => (react_1.default.createElement(BadgeStyled_1.default, Object.assign({}, (0, useThemeProps_1.default)('Badge', props), { ref: ref })));
 exports.default = react_1.default.forwardRef(Badge);

package/Button/ButtonBase.d.ts

@@ -35,6 +35,14 @@ export interface ButtonBaseProps extends Omit<ButtonNativeProps, 'color'> {
      `
      */
     readonly iconOnly?: ButtonContainerProps['iconOnly'];
+    /**
+     * The variant styles, set by `<Button variant>`. The bare `ButtonBase` has no variant
+     */
+    readonly variant?: ButtonContainerProps['variant'];
+    /**
+     * The orientation of the ButtonGroup the button is in
+     */
+    readonly groupOrientation?: ButtonContainerProps['groupOrientation'];
     /**
      * You can pass the primary, default, secondary name of the colors or your specified color value
      */

package/Button/ButtonBase.js

@@ -19,7 +19,7 @@ const ButtonIconWrapper_1 = __importDefault(require("./ButtonIconWrapper"));
 const ButtonTextWrapper_1 = __importDefault(require("./ButtonTextWrapper"));
 const ButtonContainer_1 = __importDefault(require("./ButtonContainer"));
 const ButtonBase = (props, ref) => {
-    const { children, startIcon, endIcon, color, overrides, iconOnly, type } = props, nativeProps = __rest(props, ["children", "startIcon", "endIcon", "color", "overrides", "iconOnly", "type"]);
+    const { children, startIcon, endIcon, color, overrides, iconOnly, type, variant, groupOrientation } = props, nativeProps = __rest(props, ["children", "startIcon", "endIcon", "color", "overrides", "iconOnly", "type", "variant", "groupOrientation"]);
     const overridesMap = react_1.default.useMemo(() => ({
         TextWrapper: (overrides === null || overrides === void 0 ? void 0 : overrides.TextWrapper) || ButtonTextWrapper_1.default,
         IconWrapper: (overrides === null || overrides === void 0 ? void 0 : overrides.IconWrapper) || ButtonIconWrapper_1.default,
@@ -34,7 +34,7 @@ const ButtonBase = (props, ref) => {
             console.warn('The «iconOnly» property should not be used simultaneously with «startIcon» and/or «endIcon»');
         }
     }, [isIconOnlyWithIcons]);
-    return (react_1.default.createElement(overridesMap.Container, Object.assign({ type: typeof type === 'undefined' ? 'button' : type }, nativeProps, { color: color, iconOnly: iconOnly, ref: ref }),
+    return (react_1.default.createElement(overridesMap.Container, Object.assign({ type: typeof type === 'undefined' ? 'button' : type }, nativeProps, { color: color, iconOnly: iconOnly, variant: variant, groupOrientation: groupOrientation, ref: ref }),
         typeof startIcon !== 'undefined' && startIcon !== null && (react_1.default.createElement(overridesMap.IconWrapper, { position: "start" }, startIcon)),
         react_1.default.createElement(overridesMap.TextWrapper, { iconOnly: iconOnly }, children),
         typeof endIcon !== 'undefined' && endIcon !== null && (react_1.default.createElement(overridesMap.IconWrapper, { position: "end" }, endIcon))));

package/Button/ButtonContainer.d.ts

@@ -1,4 +1,6 @@
 import React from 'react';
+import { ButtonVariant } from './buttonVariants';
+import type { ButtonGroupOrientation } from '../ButtonGroup/ButtonGroupContext';
 export type ButtonContainerProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
     /**
      * You can pass the primary, default, secondary name of the colors or your specified color value
@@ -15,6 +17,14 @@ export type ButtonContainerProps = React.ButtonHTMLAttributes<HTMLButtonElement>
      `
      */
     readonly iconOnly?: boolean;
+    /**
+     * The variant of the `<Button>`. Without it the button has no variant styles (the bare `ButtonBase`)
+     */
+    readonly variant?: ButtonVariant;
+    /**
+     * The orientation of the ButtonGroup the button is in
+     */
+    readonly groupOrientation?: ButtonGroupOrientation;
 };
 declare const _default: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & {
     /**
@@ -32,5 +42,13 @@ declare const _default: React.ForwardRefExoticComponent<React.ButtonHTMLAttribut
      `
      */
     readonly iconOnly?: boolean | undefined;
+    /**
+     * The variant of the `<Button>`. Without it the button has no variant styles (the bare `ButtonBase`)
+     */
+    readonly variant?: ButtonVariant | undefined;
+    /**
+     * The orientation of the ButtonGroup the button is in
+     */
+    readonly groupOrientation?: ButtonGroupOrientation | undefined;
 } & React.RefAttributes<HTMLButtonElement>>;
 export default _default;

package/Button/ButtonContainer.js

@@ -17,6 +17,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
 const react_2 = require("@emotion/react");
+const tokens_1 = require("../ThemeProvider/tokens");
+const buttonVariants_1 = require("./buttonVariants");
 const StyledButton = styled_1.default.button `
   border-radius: ${({ theme }) => theme.shape.radiusFactor * 2}em;
   padding: 0.8em 1em;
@@ -49,9 +51,11 @@ const StyledButton = styled_1.default.button `
       height: 2.6em;
       border-radius: ${theme.shape.radiusFactor * 3}em;
     `}
+  ${({ $variant, $group, color, disabled, theme }) => $variant && (0, buttonVariants_1.buttonVariantStyles)({ variant: $variant, color, disabled, group: $group, theme })}
+  ${({ theme }) => (0, tokens_1.themeFocusRing)(theme)}
 `;
 const ButtonContainer = (props, ref) => {
-    const { children, iconOnly } = props, nativeProps = __rest(props, ["children", "iconOnly"]);
-    return (react_1.default.createElement(StyledButton, Object.assign({ iconOnly: iconOnly }, nativeProps, { ref: ref }), children));
+    const { children, iconOnly, variant, groupOrientation } = props, nativeProps = __rest(props, ["children", "iconOnly", "variant", "groupOrientation"]);
+    return (react_1.default.createElement(StyledButton, Object.assign({ iconOnly: iconOnly, "$variant": variant, "$group": groupOrientation }, nativeProps, { ref: ref }), children));
 };
 exports.default = react_1.default.forwardRef(ButtonContainer);

package/Button/ButtonStyled.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { ButtonBaseProps } from './ButtonBase';
-export type ButtonVariant = 'standard' | 'outlined' | 'plain';
+import type { ButtonVariant } from './buttonVariants';
+export type { ButtonVariant };
 export type ButtonStyledProps = ButtonBaseProps & {
     readonly variant?: ButtonVariant;
 };

package/Button/ButtonStyled.js

@@ -15,169 +15,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
-const styled_1 = __importDefault(require("@emotion/styled"));
-const react_2 = require("@emotion/react");
-const Color_1 = __importDefault(require("../Color"));
 const ButtonBase_1 = __importDefault(require("./ButtonBase"));
 const ButtonGroupContext_1 = __importDefault(require("../ButtonGroup/ButtonGroupContext"));
-const parseColor = (color, fallback) => {
-    try {
-        return Color_1.default.fromString(color);
-    }
-    catch (err) {
-        console.error(`invalid color value «${color}»`);
-        return fallback;
-    }
-};
-/**
- * Text and background colors of the standard variant
- */
-const getStandardColors = (color, theme) => {
-    switch (true) {
-        case color === 'primary':
-            return { $color: theme.color.accentPrimaryContrast, $background: theme.color.accentPrimary };
-        case color === 'secondary':
-            return {
-                $color: theme.color.accentSecondaryContrast,
-                $background: theme.color.accentSecondary,
-            };
-        case typeof color === 'undefined':
-        case color === 'default':
-            return { $background: theme.color.surface, $color: theme.color.textPrimary };
-        default: {
-            const $background = parseColor(String(color), theme.color.surface);
-            return {
-                $background,
-                $color: $background.getContrast(theme.color.textPrimary) > 5
-                    ? theme.color.textPrimary
-                    : theme.color.surface,
-            };
-        }
-    }
-};
 /**
- * The main color of the outlined and plain variants (text and border)
- */
-const getAccentColor = (color, theme) => {
-    switch (true) {
-        case color === 'primary':
-            return theme.color.accentPrimary;
-        case color === 'secondary':
-            return theme.color.accentSecondary;
-        case typeof color === 'undefined':
-        case color === 'default':
-            return theme.color.textPrimary;
-        default:
-            return parseColor(String(color), theme.color.textPrimary);
-    }
-};
-const focusOutlineColor = (color, theme) => color.rgbString() === theme.color.accentPrimary.rgbString()
-    ? theme.color.textPrimary.toString()
-    : theme.color.accentPrimary.toString();
-const standardStyles = ({ $color, $background, disabled, theme }) => (0, react_2.css) `
-  color: ${disabled ? $color.alpha(0.4).toString() : $color.toString()};
-  background-color: ${disabled
-    ? $background.darken(40).toString()
-    : $background.darken(10).toString()};
-
-  ${!disabled &&
-    (0, react_2.css) `
-    &:hover {
-      background-color: ${$background.darken(30).toString()};
-    }
-    &:active {
-      background-color: ${$background.darken(80).toString()};
-    }
-    &:focus-visible {
-      outline-style: solid;
-      outline-width: 0.14em;
-      outline-color: ${focusOutlineColor($background, theme)};
-    }
-  `}
-`;
-const outlinedStyles = ({ $color, disabled, theme }) => (0, react_2.css) `
-  color: ${disabled ? theme.color.textPrimary.alpha(0.4).toString() : $color.darken(30).toString()};
-  border-color: ${disabled
-    ? theme.color.surface.darken(80).alpha(0.4).toString()
-    : $color.toString()};
-  background-color: transparent;
-  border-style: solid;
-  border-width: 0.14em;
-
-  ${!disabled &&
-    (0, react_2.css) `
-    &:hover {
-      background-color: ${$color.darken(20).alpha(0.1).toString()};
-    }
-    &:active {
-      background-color: ${$color.darken(50).alpha(0.3).toString()};
-    }
-    &:focus-visible {
-      outline-color: ${focusOutlineColor($color, theme)};
-    }
-  `}
-`;
-const plainStyles = ({ $color, disabled, theme }) => (0, react_2.css) `
-  box-shadow: none;
-  color: ${disabled ? $color.alpha(0.4).toString() : $color.toString()};
-  background: none;
-
-  ${!disabled &&
-    (0, react_2.css) `
-    &:hover {
-      color: ${$color.darken(30).toString()};
-      background-color: ${$color.alpha(0.1).toString()};
-    }
-    &:active {
-      color: ${$color.darken(80).toString()};
-      background-color: ${$color.alpha(0.3).toString()};
-    }
-    &:focus-visible {
-      outline-style: solid;
-      outline-width: 0.14em;
-      outline-color: ${focusOutlineColor($color, theme)};
-    }
-  `}
-`;
-/**
- * Inside the ButtonGroup all the variants have the same border width, so the buttons have the same size
- * and the selected (standard) button does not shrink. Two adjacent standard buttons are separated by a thin line
- */
-const groupStyles = ({ $group, $variant, $color }) => $group &&
-    (0, react_2.css) `
-    border-style: solid;
-    border-width: 0.14em;
-    ${$variant !== 'outlined' &&
-        (0, react_2.css) `
-      border-color: transparent;
-    `}
-    ${$variant === 'standard' &&
-        (0, react_2.css) `
-      [data-group-variant='standard'] + & {
-        ${$group === 'vertical' ? 'border-top-color' : 'border-left-color'}: ${$color
-            .alpha(0.25)
-            .toString()};
-      }
-    `}
-  `;
-/**
- * All the variants are one styled component: switching the variant (e.g. a toggle button)
+ * Resolves the variant and the color inside the ButtonGroup. The styles of the variant are in the Container part.
+ * All the variants are one component: switching the variant (e.g. a toggle button)
  * must not remount the element, otherwise the focused button loses the focus
  */
-const StyledButton = (0, styled_1.default)(ButtonBase_1.default) `
-  ${props => {
-    switch (props.$variant) {
-        case 'outlined':
-            return outlinedStyles(props);
-        case 'plain':
-            return plainStyles(props);
-        case 'standard':
-        default:
-            return standardStyles(props);
-    }
-}}
-  ${groupStyles}
-`;
 const ButtonStyled = (props, ref) => {
     const group = react_1.default.useContext(ButtonGroupContext_1.default);
     const { children, onClick } = props, buttonProps = __rest(props, ["children", "onClick"]);
@@ -186,20 +30,12 @@ const ButtonStyled = (props, ref) => {
     const isSelected = isSelectable && Boolean(group === null || group === void 0 ? void 0 : group.isSelected(String(buttonValue)));
     // Inside the ButtonGroup the own props of the button win over the props of the group
     const { disabled = group === null || group === void 0 ? void 0 : group.disabled, color = isSelected ? group === null || group === void 0 ? void 0 : group.selectedColor : group === null || group === void 0 ? void 0 : group.color, variant = group ? (isSelected ? 'standard' : group.variant) : 'standard' } = buttonProps, restProps = __rest(buttonProps, ["disabled", "color", "variant"]);
-    const theme = (0, react_2.useTheme)();
     const handleClick = event => {
         onClick === null || onClick === void 0 ? void 0 : onClick(event);
         if (isSelectable && !event.defaultPrevented && group) {
             group.toggle(String(buttonValue));
         }
     };
-    const { $color, $background } = react_1.default.useMemo(() => {
-        if (variant === 'standard') {
-            return getStandardColors(color, theme);
-        }
-        const accent = getAccentColor(color, theme);
-        return { $color: accent, $background: accent };
-    }, [color, variant, theme]);
-    return (react_1.default.createElement(StyledButton, Object.assign({ "$variant": variant, "$color": $color, "$background": $background, "$group": group === null || group === void 0 ? void 0 : group.orientation, "data-group-variant": group ? variant : undefined, disabled: disabled, "aria-pressed": isSelectable ? isSelected : undefined }, restProps, { onClick: handleClick, ref: ref }), children));
+    return (react_1.default.createElement(ButtonBase_1.default, Object.assign({ variant: variant, color: color, groupOrientation: group === null || group === void 0 ? void 0 : group.orientation, "data-group-variant": group ? variant : undefined, disabled: disabled, "aria-pressed": isSelectable ? isSelected : undefined }, restProps, { onClick: handleClick, ref: ref }), children));
 };
 exports.default = react_1.default.forwardRef(ButtonStyled);

package/Button/buttonVariants.d.ts

@@ -0,0 +1,16 @@
+import { Theme } from '@emotion/react';
+import type { ButtonGroupOrientation } from '../ButtonGroup/ButtonGroupContext';
+export type ButtonVariant = 'standard' | 'outlined' | 'plain';
+type ButtonColor = 'default' | 'primary' | 'secondary' | string | undefined;
+/**
+ * The styles of the variant. They are applied inside the Container part,
+ * so the theme styles and the `styled(ButtonContainer)` of the user go after them and win
+ */
+export declare const buttonVariantStyles: (params: {
+    readonly variant: ButtonVariant;
+    readonly color: ButtonColor;
+    readonly disabled?: boolean;
+    readonly group?: ButtonGroupOrientation;
+    readonly theme: Theme;
+}) => import("@emotion/utils").SerializedStyles;
+export {};

package/Button/buttonVariants.js

@@ -0,0 +1,168 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buttonVariantStyles = void 0;
+const react_1 = require("@emotion/react");
+const Color_1 = __importDefault(require("../Color"));
+const parseColor = (color, fallback) => {
+    try {
+        return Color_1.default.fromString(color);
+    }
+    catch (err) {
+        console.error(`invalid color value «${color}»`);
+        return fallback;
+    }
+};
+/**
+ * Text and background colors of the standard variant
+ */
+const getStandardColors = (color, theme) => {
+    switch (true) {
+        case color === 'primary':
+            return { $color: theme.color.accentPrimaryContrast, $background: theme.color.accentPrimary };
+        case color === 'secondary':
+            return {
+                $color: theme.color.accentSecondaryContrast,
+                $background: theme.color.accentSecondary,
+            };
+        case typeof color === 'undefined':
+        case color === 'default':
+            return { $background: theme.color.surface, $color: theme.color.textPrimary };
+        default: {
+            const $background = parseColor(String(color), theme.color.surface);
+            return {
+                $background,
+                $color: $background.getContrast(theme.color.textPrimary) > 5
+                    ? theme.color.textPrimary
+                    : theme.color.surface,
+            };
+        }
+    }
+};
+/**
+ * The main color of the outlined and plain variants (text and border)
+ */
+const getAccentColor = (color, theme) => {
+    switch (true) {
+        case color === 'primary':
+            return theme.color.accentPrimary;
+        case color === 'secondary':
+            return theme.color.accentSecondary;
+        case typeof color === 'undefined':
+        case color === 'default':
+            return theme.color.textPrimary;
+        default:
+            return parseColor(String(color), theme.color.textPrimary);
+    }
+};
+const focusOutlineColor = (color, theme) => color.rgbString() === theme.color.accentPrimary.rgbString()
+    ? theme.color.textPrimary.toString()
+    : theme.color.accentPrimary.toString();
+const standardStyles = ({ $color, $background, disabled, theme }) => (0, react_1.css) `
+  color: ${disabled ? $color.alpha(0.4).toString() : $color.toString()};
+  background-color: ${disabled
+    ? $background.darken(40).toString()
+    : $background.darken(10).toString()};
+
+  ${!disabled &&
+    (0, react_1.css) `
+    &:hover {
+      background-color: ${$background.darken(30).toString()};
+    }
+    &:active {
+      background-color: ${$background.darken(80).toString()};
+    }
+    &:focus-visible {
+      outline-style: solid;
+      outline-width: 0.14em;
+      outline-color: ${focusOutlineColor($background, theme)};
+    }
+  `}
+`;
+const outlinedStyles = ({ $color, disabled, theme }) => (0, react_1.css) `
+  color: ${disabled ? theme.color.textPrimary.alpha(0.4).toString() : $color.darken(30).toString()};
+  border-color: ${disabled
+    ? theme.color.surface.darken(80).alpha(0.4).toString()
+    : $color.toString()};
+  background-color: transparent;
+  border-style: solid;
+  border-width: 0.14em;
+
+  ${!disabled &&
+    (0, react_1.css) `
+    &:hover {
+      background-color: ${$color.darken(20).alpha(0.1).toString()};
+    }
+    &:active {
+      background-color: ${$color.darken(50).alpha(0.3).toString()};
+    }
+    &:focus-visible {
+      outline-color: ${focusOutlineColor($color, theme)};
+    }
+  `}
+`;
+const plainStyles = ({ $color, disabled, theme }) => (0, react_1.css) `
+  box-shadow: none;
+  color: ${disabled ? $color.alpha(0.4).toString() : $color.toString()};
+  background: none;
+
+  ${!disabled &&
+    (0, react_1.css) `
+    &:hover {
+      color: ${$color.darken(30).toString()};
+      background-color: ${$color.alpha(0.1).toString()};
+    }
+    &:active {
+      color: ${$color.darken(80).toString()};
+      background-color: ${$color.alpha(0.3).toString()};
+    }
+    &:focus-visible {
+      outline-style: solid;
+      outline-width: 0.14em;
+      outline-color: ${focusOutlineColor($color, theme)};
+    }
+  `}
+`;
+/**
+ * Inside the ButtonGroup all the variants have the same border width, so the buttons have the same size
+ * and the selected (standard) button does not shrink. Two adjacent standard buttons are separated by a thin line
+ */
+const groupStyles = ({ $group, $variant, $color }) => $group &&
+    (0, react_1.css) `
+    border-style: solid;
+    border-width: 0.14em;
+    ${$variant !== 'outlined' &&
+        (0, react_1.css) `
+      border-color: transparent;
+    `}
+    ${$variant === 'standard' &&
+        (0, react_1.css) `
+      [data-group-variant='standard'] + & {
+        ${$group === 'vertical' ? 'border-top-color' : 'border-left-color'}: ${$color
+            .alpha(0.25)
+            .toString()};
+      }
+    `}
+  `;
+/**
+ * The styles of the variant. They are applied inside the Container part,
+ * so the theme styles and the `styled(ButtonContainer)` of the user go after them and win
+ */
+const buttonVariantStyles = (params) => {
+    const { variant, color, disabled, group, theme } = params;
+    const colors = variant === 'standard'
+        ? getStandardColors(color, theme)
+        : { $color: getAccentColor(color, theme), $background: getAccentColor(color, theme) };
+    const props = Object.assign(Object.assign({}, colors), { $variant: variant, $group: group, disabled, theme });
+    return (0, react_1.css) `
+    ${variant === 'outlined'
+        ? outlinedStyles(props)
+        : variant === 'plain'
+            ? plainStyles(props)
+            : standardStyles(props)}
+    ${groupStyles(props)}
+  `;
+};
+exports.buttonVariantStyles = buttonVariantStyles;

package/Button/index.js

@@ -5,6 +5,25 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const ButtonStyled_1 = __importDefault(require("./ButtonStyled"));
+const ButtonGroupContext_1 = __importDefault(require("../ButtonGroup/ButtonGroupContext"));
+const useThemeProps_1 = __importDefault(require("../ThemeProvider/useThemeProps"));
+/**
+ * The props the ButtonGroup gives to its buttons. Inside the group the theme does not set them:
+ * the own props of the button win, then the group, then the theme
+ */
+const GROUP_PROPS = ['variant', 'color', 'disabled'];
 // One component for all the variants, so changing the variant does not remount the button
-const Button = (props, ref) => (react_1.default.createElement(ButtonStyled_1.default, Object.assign({}, props, { ref: ref })));
+const Button = (props, ref) => {
+    const group = react_1.default.useContext(ButtonGroupContext_1.default);
+    const themedProps = (0, useThemeProps_1.default)('Button', props);
+    if (!group) {
+        return react_1.default.createElement(ButtonStyled_1.default, Object.assign({}, themedProps, { ref: ref }));
+    }
+    const ownProps = props;
+    const buttonProps = Object.assign({}, themedProps);
+    GROUP_PROPS.forEach(key => {
+        buttonProps[key] = ownProps[key];
+    });
+    return react_1.default.createElement(ButtonStyled_1.default, Object.assign({}, buttonProps, { ref: ref }));
+};
 exports.default = react_1.default.forwardRef(Button);