@veracity/vui 1.7.0-beta.3 → 1.7.0-redesign.1

package/dist/cjs/button/button.js

@@ -59,7 +59,7 @@ const StateWrapper = core_1.styled.span `
 `;
 exports.ButtonBase = core_1.styled.buttonBox `
   align-items: center;
-  border-radius: md;
+  border-radius: none;
   display: inline-flex;
   flex-shrink: 0;
   font-weight: medium;
@@ -70,13 +70,6 @@ exports.ButtonBase = core_1.styled.buttonBox `
   transition-duration: fast;
   user-select: none;
   width: fit-content;
-
-  &:focus,
-  &:focus:hover {
-    border-color: transparent;
-    outline: none;
-    z-index: 1;
-  }
 `;
 /**
  * Triggers given actions on click. Supports multiple states, sizes and variants.
@@ -89,56 +82,56 @@ exports.Button = (0, core_1.vui)((props, ref) => {
     var _a, _b, _c, _d;
     const buttonGroupProps = (0, context_1.useButtonGroupContext)();
     const mergedProps = Object.assign(Object.assign({}, buttonGroupProps), props);
-    const { borderWidth: borderWidthProp, children, className, colorScheme: colorSchemeProp, disabled, icon, iconLeft, iconRight, isActive, isDropDown, isElevated, isFullWidth, isLoading, // eslint-disable-line
-    isRound, isSplit, isTruncated, size, state = props.isLoading ? 'loading' : '', stateMapping, text, variant } = mergedProps, rest = __rest(mergedProps, ["borderWidth", "children", "className", "colorScheme", "disabled", "icon", "iconLeft", "iconRight", "isActive", "isDropDown", "isElevated", "isFullWidth", "isLoading", "isRound", "isSplit", "isTruncated", "size", "state", "stateMapping", "text", "variant"]);
+    const { borderWidth: borderWidthProp, children, className, colorScheme, disabled, icon, iconLeft, iconRight, isActive, isDropDown, isElevated, isFullWidth, isLoading, // eslint-disable-line
+    isRound, isSplit, isTruncated, size, state = props.isLoading ? 'loading' : '', stateMapping, text, variant: variantProp } = mergedProps, rest = __rest(mergedProps, ["borderWidth", "children", "className", "colorScheme", "disabled", "icon", "iconLeft", "iconRight", "isActive", "isDropDown", "isElevated", "isFullWidth", "isLoading", "isRound", "isSplit", "isTruncated", "size", "state", "stateMapping", "text", "variant"]);
     const hasState = Boolean(state) && state !== 'idle';
     const states = Object.assign(Object.assign({}, consts_1.buttonStateMapping), stateMapping);
     const _e = (_a = states[state]) !== null && _a !== void 0 ? _a : {}, { iconProps: stateIconProps } = _e, stateProps = __rest(_e, ["iconProps"]);
-    const colorScheme = (0, utils_1.filterUndefined)({
-        colorScheme: (_c = (_b = states[state]) === null || _b === void 0 ? void 0 : _b.colorScheme) !== null && _c !== void 0 ? _c : colorSchemeProp
+    const variant = (0, utils_1.filterUndefined)({
+        variant: (_c = (_b = states[state]) === null || _b === void 0 ? void 0 : _b.variant) !== null && _c !== void 0 ? _c : variantProp
     });
-    const styles = (0, core_1.useStyleConfig)('Button', Object.assign(Object.assign({}, mergedProps), colorScheme));
+    const styles = (0, core_1.useStyleConfig)('Button', Object.assign(Object.assign({}, mergedProps), variant));
     const _f = styles.container, { borderWidth, h, spaceX = 0 } = _f, buttonStyles = __rest(_f, ["borderWidth", "h", "spaceX"]);
-    const context = (0, react_1.useMemo)(() => (0, utils_1.filterUndefined)({ colorScheme, disabled, size, variant }), [colorScheme, disabled, size, variant]);
+    const context = (0, react_1.useMemo)(() => (0, utils_1.filterUndefined)({ disabled, size, variant }), [disabled, size, variant]);
     const Content = hasState ? ContentWrapper : react_1.default.Fragment;
     // Apply more space for text and less space for icons
-    const border = (_d = borderWidthProp !== null && borderWidthProp !== void 0 ? borderWidthProp : borderWidth) !== null && _d !== void 0 ? _d : 0;
+    const border = (_d = borderWidthProp !== null && borderWidthProp !== void 0 ? borderWidthProp : borderWidth) !== null && _d !== void 0 ? _d : 1;
     const spaceXItem = spaceX - border;
     const spaceXText = spaceX * 2 - border;
     const iconLeftMr = spaceXItem + 1 + 'px';
     const iconRightMl = isSplit ? 'auto' : spaceXItem + 1 + 'px';
     const pl = (icon || iconLeft ? spaceXItem : spaceXText) + 'px';
     const pr = (icon || iconRight ? spaceXItem : spaceXText) + 'px';
-    const disabledBorderColor = variant === 'outlined' ? 'disabled.border' : 'disabled.bg';
     const disabledProps = disabled
         ? {
             'aria-disabled': disabled,
-            activeBg: 'disabled.bg',
-            bg: 'disabled.bg',
-            borderColor: disabledBorderColor,
-            hoverBorderColor: disabledBorderColor,
-            color: 'disabled.color',
+            disabledBg: 'bg',
+            disabledBorderColor: 'borderColor',
+            disabledColor: 'color',
+            hoverBg: 'bg',
+            hoverBorderColor: 'borderColor',
+            activeBg: 'bg',
             cursor: 'not-allowed',
-            hoverBg: 'disabled.bg'
+            opacity: 0.5
         }
         : {};
     const aliasedProps = (0, utils_1.filterUndefined)({
-        borderRadius: isRound ? h / 2 : undefined,
+        borderRadius: isRound ? h / 2 : 0,
         boxShadow: isElevated ? '2' : undefined,
         minW: icon ? 0 : undefined,
         pointerEvents: hasState ? 'none' : undefined,
         w: isFullWidth ? '100%' : undefined
     });
     return (react_1.default.createElement(context_2.ButtonProvider, { value: context },
-        react_1.default.createElement(exports.ButtonBase, Object.assign({ borderWidth: border, className: (0, utils_1.cs)('vui-button', className, isActive && utils_1.activeClassName), disabled: disabled, focusRing: 3, h: h, pl: pl, pr: isDropDown ? 0 : pr, ref: ref, type: "button", variant: variant }, buttonStyles, disabledProps, aliasedProps, rest),
+        react_1.default.createElement(exports.ButtonBase, Object.assign({ borderWidth: border, className: (0, utils_1.cs)('vui-button', className, isActive && utils_1.activeClassName), disabled: disabled, focusRing: 3, h: h, pl: pl, pr: pr, ref: ref, type: "button", variant: variant }, buttonStyles, disabledProps, aliasedProps, rest),
             hasState && (react_1.default.createElement(StateWrapper, Object.assign({ onClick: (e) => e.stopPropagation() }, stateProps),
                 react_1.default.createElement(buttonIcon_1.default, Object.assign({ m: "auto" }, stateIconProps)))),
             react_1.default.createElement(Content, null,
                 (0, utils_1.isString)(icon) ? react_1.default.createElement(buttonIcon_1.default, { name: icon }) : icon,
                 !icon && (react_1.default.createElement(react_1.default.Fragment, null,
                     (0, utils_1.isString)(iconLeft) ? react_1.default.createElement(buttonIcon_1.default, { mr: isDropDown ? 0 : iconLeftMr, name: iconLeft }) : iconLeft, children !== null && children !== void 0 ? children : ((0, utils_1.isReactText)(text) ? react_1.default.createElement(buttonText_1.default, Object.assign({}, { isTruncated, text })) : text),
-                    (0, utils_1.isString)(iconRight) ? react_1.default.createElement(buttonIcon_1.default, { ml: iconRightMl, name: iconRight }) : iconRight)),
-                isDropDown && react_1.default.createElement(buttonIcon_1.default, { name: "falAngleDown" })))));
+                    isDropDown && react_1.default.createElement(buttonIcon_1.default, { name: "falAngleDown" }),
+                    (0, utils_1.isString)(iconRight) ? react_1.default.createElement(buttonIcon_1.default, { ml: iconRightMl, name: iconRight }) : iconRight))))));
 });
 exports.Button.Icon = buttonIcon_1.default;
 exports.Button.Text = buttonText_1.default;

package/dist/cjs/button/button.types.d.ts

@@ -3,10 +3,9 @@ import { IconProp, IconProps } from '../icon';
 import { SystemProps } from '../system';
 import { ThemingProps } from '../theme';
 import { AnyString } from '../utils';
-export declare type ButtonColorScheme = 'blue' | 'green' | 'pink' | 'prussian' | 'red';
 export declare type ButtonProps = SystemProps & ThemingProps<'Button'> & {
-    /** Available theme colors for this component. @default prussian */
-    colorScheme?: ButtonColorScheme;
+    /** Available theme colors for this component. @deprecated */
+    colorScheme?: string;
     /** Icon that replaces any other content. */
     icon?: IconProp | JSX.Element;
     /** Socket displaying icon on the left side. */
@@ -36,7 +35,7 @@ export declare type ButtonProps = SystemProps & ThemingProps<'Button'> & {
 };
 export declare type ButtonState = 'error' | 'idle' | 'loading' | 'success' | AnyString;
 export declare type ButtonStateMapping = Record<string, SystemProps & {
-    colorScheme: ButtonProps['colorScheme'];
+    variant: ButtonProps['variant'];
     iconProps: IconProps;
 }>;
 /** Narrower prop definition for IconButton component */

package/dist/cjs/button/button.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.types.d.ts","sourceRoot":"","sources":["../../../src/button/button.types.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AACvC,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAEpC,oBAAY,iBAAiB,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,UAAU,GAAG,KAAK,CAAA;AAE9E,oBAAY,WAAW,GAAG,WAAW,GACnC,YAAY,CAAC,QAAQ,CAAC,GAAG;IACvB,mEAAmE;IACnE,WAAW,CAAC,EAAE,iBAAiB,CAAA;IAC/B,4CAA4C;IAC5C,IAAI,CAAC,EAAE,QAAQ,GAAG,GAAG,CAAC,OAAO,CAAA;IAC7B,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,QAAQ,GAAG,GAAG,CAAC,OAAO,CAAA;IACjC,gDAAgD;IAChD,SAAS,CAAC,EAAE,QAAQ,GAAG,GAAG,CAAC,OAAO,CAAA;IAClC,sDAAsD;IACtD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,6CAA6C;IAC7C,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,4CAA4C;IAC5C,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,qEAAqE;IACrE,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,8DAA8D;IAC9D,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,yCAAyC;IACzC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,yDAAyD;IACzD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,kEAAkE;IAClE,KAAK,CAAC,EAAE,WAAW,CAAA;IACnB,8DAA8D;IAC9D,YAAY,CAAC,EAAE,kBAAkB,CAAA;IACjC,sDAAsD;IACtD,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACvB,CAAA;AACH,oBAAY,WAAW,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,CAAA;AAE9E,oBAAY,kBAAkB,GAAG,MAAM,CACrC,MAAM,EACN,WAAW,GAAG;IAAE,WAAW,EAAE,WAAW,CAAC,aAAa,CAAC,CAAC;IAAC,SAAS,EAAE,SAAS,CAAA;CAAE,CAChF,CAAA;AAED,wDAAwD;AACxD,oBAAY,eAAe,GAAG,IAAI,CAAC,WAAW,EAAE,UAAU,GAAG,WAAW,GAAG,MAAM,CAAC,CAAA"}
+{"version":3,"file":"button.types.d.ts","sourceRoot":"","sources":["../../../src/button/button.types.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AACvC,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAEpC,oBAAY,WAAW,GAAG,WAAW,GACnC,YAAY,CAAC,QAAQ,CAAC,GAAG;IACvB,6DAA6D;IAC7D,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,4CAA4C;IAC5C,IAAI,CAAC,EAAE,QAAQ,GAAG,GAAG,CAAC,OAAO,CAAA;IAC7B,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,QAAQ,GAAG,GAAG,CAAC,OAAO,CAAA;IACjC,gDAAgD;IAChD,SAAS,CAAC,EAAE,QAAQ,GAAG,GAAG,CAAC,OAAO,CAAA;IAClC,sDAAsD;IACtD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,6CAA6C;IAC7C,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,4CAA4C;IAC5C,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,qEAAqE;IACrE,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,8DAA8D;IAC9D,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,yCAAyC;IACzC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,yDAAyD;IACzD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,kEAAkE;IAClE,KAAK,CAAC,EAAE,WAAW,CAAA;IACnB,8DAA8D;IAC9D,YAAY,CAAC,EAAE,kBAAkB,CAAA;IACjC,sDAAsD;IACtD,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACvB,CAAA;AAEH,oBAAY,WAAW,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,CAAA;AAE9E,oBAAY,kBAAkB,GAAG,MAAM,CAAC,MAAM,EAAE,WAAW,GAAG;IAAE,OAAO,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IAAC,SAAS,EAAE,SAAS,CAAA;CAAE,CAAC,CAAA;AAExH,wDAAwD;AACxD,oBAAY,eAAe,GAAG,IAAI,CAAC,WAAW,EAAE,UAAU,GAAG,WAAW,GAAG,MAAM,CAAC,CAAA"}

package/dist/cjs/button/buttons.js

@@ -7,11 +7,11 @@ exports.TextButton = exports.LineButton = exports.IconButton = exports.DangerBut
 const react_1 = __importDefault(require("react"));
 const core_1 = require("../core");
 const button_1 = __importDefault(require("./button"));
-exports.AppButton = (0, core_1.vui)((props, ref) => (react_1.default.createElement(button_1.default, Object.assign({ colorScheme: "blue", ref: ref, variant: "solid" }, props))));
-exports.BackButton = (0, core_1.vui)((props, ref) => (react_1.default.createElement(exports.IconButton, Object.assign({ colorScheme: "blue", icon: "falArrowLeft", ref: ref, variant: "text" }, props))));
-exports.CloseButton = (0, core_1.vui)((props, ref) => (react_1.default.createElement(exports.IconButton, Object.assign({ colorScheme: "blue", icon: "falTimes", ref: ref, variant: "text" }, props))));
-exports.CTAButton = (0, core_1.vui)((props, ref) => (react_1.default.createElement(button_1.default, Object.assign({ colorScheme: "green", ref: ref, variant: "solid" }, props))));
-exports.DangerButton = (0, core_1.vui)((props, ref) => (react_1.default.createElement(button_1.default, Object.assign({ colorScheme: "red", ref: ref, variant: "solid" }, props))));
-exports.IconButton = (0, core_1.vui)((props, ref) => (react_1.default.createElement(button_1.default, Object.assign({ colorScheme: "blue", ref: ref, variant: "text" }, props))));
-exports.LineButton = (0, core_1.vui)((props, ref) => (react_1.default.createElement(button_1.default, Object.assign({ colorScheme: "blue", ref: ref, variant: "outlined" }, props))));
-exports.TextButton = (0, core_1.vui)((props, ref) => (react_1.default.createElement(button_1.default, Object.assign({ colorScheme: "blue", ref: ref, variant: "text" }, props))));
+exports.AppButton = (0, core_1.vui)((props, ref) => (react_1.default.createElement(button_1.default, Object.assign({ ref: ref, variant: "primaryDark" }, props))));
+exports.BackButton = (0, core_1.vui)((props, ref) => (react_1.default.createElement(exports.IconButton, Object.assign({ icon: "falArrowLeft", ref: ref, variant: "tertiaryDark" }, props))));
+exports.CloseButton = (0, core_1.vui)((props, ref) => (react_1.default.createElement(exports.IconButton, Object.assign({ icon: "falTimes", ref: ref, variant: "tertiaryDark" }, props))));
+exports.CTAButton = (0, core_1.vui)((props, ref) => (react_1.default.createElement(button_1.default, Object.assign({ ref: ref, variant: "solidGreen" }, props))));
+exports.DangerButton = (0, core_1.vui)((props, ref) => (react_1.default.createElement(button_1.default, Object.assign({ ref: ref, variant: "solidRed" }, props))));
+exports.IconButton = (0, core_1.vui)((props, ref) => (react_1.default.createElement(button_1.default, Object.assign({ ref: ref, variant: "tertiaryDark" }, props))));
+exports.LineButton = (0, core_1.vui)((props, ref) => (react_1.default.createElement(button_1.default, Object.assign({ ref: ref, variant: "secondaryDark" }, props))));
+exports.TextButton = (0, core_1.vui)((props, ref) => (react_1.default.createElement(button_1.default, Object.assign({ ref: ref, variant: "tertiaryDark" }, props))));

package/dist/cjs/button/consts.js

@@ -3,14 +3,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.buttonStateMapping = void 0;
 exports.buttonStateMapping = {
     error: {
-        colorScheme: 'red',
+        variant: 'solidRed',
         iconProps: {
             animation: 'fadeDown',
             icon: 'falTimesCircle'
         }
     },
     loading: {
-        colorScheme: 'blue',
+        variant: 'primaryDark',
         iconProps: {
             animation: 'vui-spin 0.6s linear infinite',
             name: 'fadSpinnerThird',
@@ -18,7 +18,7 @@ exports.buttonStateMapping = {
         }
     },
     success: {
-        colorScheme: 'green',
+        variant: 'solidGreen',
         iconProps: {
             animation: 'fadeDown',
             icon: 'falCheckCircle'

package/dist/cjs/button/theme.d.ts

@@ -1,49 +1,12 @@
-import { Dict } from '../utils';
-declare function variantOutlined(props: Dict): {
-    container: {
-        borderColor: string;
-        hoverBorderColor: string;
-        focusRing: number;
-        hoverBg: string;
-        activeBg: string;
-        bg: string;
-        borderWidth: number;
-        color: string;
-    };
-};
-declare function variantSolid(props: Dict): {
-    container: {
-        hoverBg: string;
-        hoverBorderColor: string;
-        activeBg: string;
-        bg: string;
-        borderColor: string;
-        borderWidth: number;
-        color: string;
-    };
-};
-declare function variantText(props: Dict): {
-    container: {
-        hoverBg: string;
-        hoverBorderColor: string;
-        activeBg: string;
-        bg: string;
-        borderColor: string;
-        borderWidth: number;
-        color: string;
-        focusRing: number;
-    };
-};
 declare const _default: {
     baseStyle: {};
     defaultProps: {
-        colorScheme: string;
         size: string;
         variant: string;
     };
     parts: string[];
     sizes: {
-        xs: {
+        sm: {
             container: {
                 fontSize: string;
                 h: number;
@@ -55,7 +18,7 @@ declare const _default: {
             };
             text: {};
         };
-        sm: {
+        md: {
             container: {
                 fontSize: string;
                 h: number;
@@ -67,7 +30,7 @@ declare const _default: {
             };
             text: {};
         };
-        md: {
+        lg: {
             container: {
                 fontSize: string;
                 h: number;
@@ -79,7 +42,7 @@ declare const _default: {
             };
             text: {};
         };
-        lg: {
+        xl: {
             container: {
                 fontSize: string;
                 h: number;
@@ -93,9 +56,123 @@ declare const _default: {
         };
     };
     variants: {
-        outlined: typeof variantOutlined;
-        solid: typeof variantSolid;
-        text: typeof variantText;
+        primaryDark: {
+            container: {
+                bg: string;
+                borderColor: string;
+                color: string;
+                hoverBg: string;
+                hoverBorderColor: string;
+                hoverColor: string;
+                activeBg: string;
+                activeBorderColor: string;
+                activeColor: string;
+            };
+        };
+        secondaryDark: {
+            container: {
+                bg: string;
+                borderColor: string;
+                color: string;
+                hoverBg: string;
+                hoverBorderColor: string;
+                hoverColor: string;
+                activeBg: string;
+                activeBorderColor: string;
+                activeColor: string;
+            };
+        };
+        tertiaryDark: {
+            container: {
+                bg: string;
+                borderColor: string;
+                color: string;
+                hoverBg: string;
+                hoverBorderColor: string;
+                hoverColor: string;
+                activeBg: string;
+                activeBorderColor: string;
+                activeColor: string;
+            };
+        };
+        solidGreen: {
+            container: {
+                bg: string;
+                borderColor: string;
+                color: string;
+                disabledBg: string;
+                disabledBorderColor: string;
+                disabledColor: string;
+                hoverBg: string;
+                hoverBorderColor: string;
+                focusBg: string;
+                activeBg: string;
+                activeBorderColor: string;
+            };
+        };
+        solidRed: {
+            container: {
+                bg: string;
+                borderColor: string;
+                color: string;
+                disabledBg: string;
+                disabledBorderColor: string;
+                disabledColor: string;
+                hoverBg: string;
+                hoverBorderColor: string;
+                focusBg: string;
+                activeBg: string;
+                activeBorderColor: string;
+            };
+        };
+        subtleBlue: {
+            container: {
+                bg: string;
+                borderColor: string;
+                color: string;
+                disabledBg: string;
+                disabledBorderColor: string;
+                disabledColor: string;
+                hoverBg: string;
+                hoverBorderColor: string;
+                focusBg: string;
+                activeBg: string;
+                activeBorderColor: string;
+            };
+        };
+        subtleRed: {
+            container: {
+                bg: string;
+                borderColor: string;
+                hoverBg: string;
+                hoverBorderColor: string;
+                focusBg: string;
+                activeBg: string;
+                color: string;
+            };
+        };
+        subtleYellow: {
+            container: {
+                bg: string;
+                borderColor: string;
+                hoverBg: string;
+                hoverBorderColor: string;
+                focusBg: string;
+                activeBg: string;
+                color: string;
+            };
+        };
+        subtleGreen: {
+            container: {
+                bg: string;
+                borderColor: string;
+                hoverBg: string;
+                hoverBorderColor: string;
+                focusBg: string;
+                activeBg: string;
+                color: string;
+            };
+        };
     };
 };
 export default _default;

package/dist/cjs/button/theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/button/theme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAA;AAE/B,iBAAS,eAAe,CAAC,KAAK,EAAE,IAAI;;;;;;;;;;;EAWnC;AAED,iBAAS,YAAY,CAAC,KAAK,EAAE,IAAI;;;;;;;;;;EAqBhC;AAED,iBAAS,WAAW,CAAC,KAAK,EAAE,IAAI;;;;;;;;;;;EAsB/B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqED,wBAMC"}
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/button/theme.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyMA,wBAMC"}

package/dist/cjs/button/theme.js

@@ -1,59 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-function variantOutlined(props) {
-    var _a;
-    const { colorScheme: c } = props;
-    const container = Object.assign(Object.assign({}, (_a = variantText(props)) === null || _a === void 0 ? void 0 : _a.container), { borderColor: `${c}.80`, hoverBorderColor: `${c}.80`, focusRing: 3 });
-    return { container };
-}
-function variantSolid(props) {
-    const { colorScheme: c } = props;
-    const container = {
-        hoverBg: `${c}.90`,
-        hoverBorderColor: `${c}.90`,
-        activeBg: `${c}.100`,
-        bg: `${c}.80`,
-        borderColor: `${c}.80`,
-        borderWidth: 1,
-        color: 'white'
-    };
-    // Special cases
-    if (c === 'prussian') {
-        container.activeBg = 'prussian.50';
-        container.hoverBg = 'prussian.60';
-        container.hoverBorderColor = 'prussian.60';
-    }
-    return { container };
-}
-function variantText(props) {
-    const { colorScheme: c } = props;
-    const container = {
-        hoverBg: `${c}.20`,
-        hoverBorderColor: `${c}.20`,
-        activeBg: `${c}.30`,
-        bg: 'transparent',
-        borderColor: 'transparent',
-        borderWidth: 1,
-        color: `${c}.80`,
-        focusRing: 2
-    };
-    // Special cases
-    if (c === 'prussian') {
-        container.activeBg = 'blue.30';
-        container.hoverBg = 'blue.20';
-        container.hoverBorderColor = 'blue.20';
-    }
-    return { container };
-}
 const baseStyle = {};
 const defaultProps = {
-    colorScheme: 'prussian',
     size: 'md',
-    variant: 'solid'
+    variant: 'primaryDark'
 };
 const parts = ['container', 'icon', 'text'];
 const sizes = {
-    xs: {
+    sm: {
         container: {
             fontSize: 'sm',
             h: 24,
@@ -65,7 +19,7 @@ const sizes = {
         },
         text: {}
     },
-    sm: {
+    md: {
         container: {
             fontSize: 'sm',
             h: 32,
@@ -77,7 +31,7 @@ const sizes = {
         },
         text: {}
     },
-    md: {
+    lg: {
         container: {
             fontSize: 'md',
             h: 40,
@@ -89,7 +43,7 @@ const sizes = {
         },
         text: {}
     },
-    lg: {
+    xl: {
         container: {
             fontSize: 'lg',
             h: 48,
@@ -103,9 +57,136 @@ const sizes = {
     }
 };
 const variants = {
-    outlined: variantOutlined,
-    solid: variantSolid,
-    text: variantText
+    primaryDark: {
+        container: {
+            bg: 'buttonTypePrimaryDefaultBackgroundColorDark',
+            borderColor: 'buttonTypePrimaryDefaultBorderColorDark',
+            color: 'buttonTypePrimaryDefaultTextColorDark',
+            hoverBg: 'buttonTypePrimaryHoverBackgroundColorDark',
+            hoverBorderColor: 'buttonTypePrimaryHoverBorderColorDark',
+            hoverColor: 'buttonTypePrimaryHoverTextColorDark',
+            activeBg: 'buttonTypePrimaryActiveBackgroundColorDark',
+            activeBorderColor: 'buttonTypePrimaryActiveBorderColorDark',
+            activeColor: 'buttonTypePrimaryActiveTextColorDark'
+        }
+    },
+    secondaryDark: {
+        container: {
+            bg: 'buttonTypeSecondaryDefaultBackgroundColorDark',
+            borderColor: 'buttonTypeSecondaryDefaultBorderColorDark',
+            color: 'buttonTypeSecondaryDefaultTextColorDark',
+            // discussed with Jesus, the decision was made on 2-may-2022 that OneDesign designers will update to VUI shade
+            // hover will change from 90 to 85
+            hoverBg: 'buttonTypeSecondaryHoverBackgroundColorDark',
+            hoverBorderColor: 'buttonTypeSecondaryHoverBorderColorDark',
+            hoverColor: 'buttonTypeSecondaryHoverTextColorDark',
+            // discussed with Jesus, the decision was made on 2-may-2022 that OneDesign designers will update to VUI shade
+            // active will change from 95% to 90%
+            activeBg: 'buttonTypeSecondaryActiveBackgroundColorDark',
+            activeBorderColor: 'buttonTypeSecondaryActiveBorderColorDark',
+            activeColor: 'buttonTypeSecondaryActiveTextColorDark'
+        }
+    },
+    tertiaryDark: {
+        container: {
+            bg: 'buttonTypeTertiaryDefaultBackgroundColorDark',
+            borderColor: 'buttonTypeTertiaryDefaultBorderColorDark',
+            color: 'buttonTypeTertiaryDefaultTextColorDark',
+            hoverBg: 'buttonTypeTertiaryHoverBackgroundColorDark',
+            hoverBorderColor: 'buttonTypeTertiaryHoverBorderColorDark',
+            hoverColor: 'buttonTypeTertiaryHoverTextColorDark',
+            activeBg: 'buttonTypeTertiaryActiveBackgroundColorDark',
+            activeBorderColor: 'buttonTypeTertiaryActiveBorderColorDark',
+            activeColor: 'buttonTypeTertiaryActiveTextColorDark'
+        }
+    },
+    solidGreen: {
+        container: {
+            bg: 'landGreen.35',
+            borderColor: 'landGreen.35',
+            color: 'white',
+            disabledBg: 'landGreen.70',
+            disabledBorderColor: 'landGreen.70',
+            disabledColor: 'white',
+            hoverBg: 'landGreen.25',
+            hoverBorderColor: 'landGreen.25',
+            focusBg: 'landGreen.35',
+            activeBg: 'landGreen.41',
+            activeBorderColor: 'landGreen.41'
+        }
+    },
+    solidRed: {
+        container: {
+            bg: 'energyRed.45',
+            borderColor: 'energyRed.45',
+            color: 'white',
+            disabledBg: 'energyRed.80',
+            disabledBorderColor: 'energyRed.80',
+            disabledColor: 'white',
+            // proper order is important next: hover >  focus >  active
+            hoverBg: 'energyRed.35',
+            hoverBorderColor: 'energyRed.35',
+            focusBg: 'energyRed.45',
+            activeBg: 'energyRed.50',
+            activeBorderColor: 'energyRed.50'
+        }
+    },
+    // subtleBlue is an internal variant, used in notification; based on primaryDark
+    subtleBlue: {
+        container: {
+            bg: 'transparent',
+            borderColor: 'transparent',
+            color: 'seaBlue.28',
+            disabledBg: 'white',
+            disabledBorderColor: 'darkBlue.75',
+            disabledColor: 'darkBlue.75',
+            // proper order is important next: hover >  focus >  active
+            hoverBg: 'skyBlue.90',
+            hoverBorderColor: 'skyBlue.90',
+            focusBg: 'transparent',
+            activeBg: 'skyBlue.85',
+            activeBorderColor: 'skyBlue.85'
+        }
+    },
+    // subtleRed is an internal variant, used in notification; based on primaryDark
+    subtleRed: {
+        container: {
+            bg: 'transparent',
+            borderColor: 'transparent',
+            // proper order is important next: hover >  focus >  active
+            hoverBg: 'energyRed.90',
+            hoverBorderColor: 'energyRed.90',
+            focusBg: 'transparent',
+            activeBg: 'energyRed.85',
+            color: 'energyRed.45'
+        }
+    },
+    // subtleYellow is an internal variant, used in notification; based on primaryDark
+    subtleYellow: {
+        container: {
+            bg: 'transparent',
+            borderColor: 'transparent',
+            // proper order is important next: hover >  focus >  active
+            hoverBg: 'sunflower.70',
+            hoverBorderColor: 'sunflower.70',
+            focusBg: 'transparent',
+            activeBg: 'sunflower.65',
+            color: 'sunflower.15'
+        }
+    },
+    // subtleGreen is an internal variant, used in notification; based on primaryDark
+    subtleGreen: {
+        container: {
+            bg: 'transparent',
+            borderColor: 'transparent',
+            // proper order is important next: hover >  focus >  active
+            hoverBg: 'landGreen.90',
+            hoverBorderColor: 'landGreen.90',
+            focusBg: 'transparent',
+            activeBg: 'landGreen.85',
+            color: 'landGreen.30'
+        }
+    }
 };
 exports.default = {
     baseStyle,

package/dist/cjs/buttonGroup/buttonGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"buttonGroup.d.ts","sourceRoot":"","sources":["../../../src/buttonGroup/buttonGroup.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAA;AAItD,eAAO,MAAM,eAAe;;sBAA2D,MAAM;SA2C5F,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,WAAW,yDAiBtB,CAAA;AAEF,eAAe,WAAW,CAAA"}
+{"version":3,"file":"buttonGroup.d.ts","sourceRoot":"","sources":["../../../src/buttonGroup/buttonGroup.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAA;AAItD,eAAO,MAAM,eAAe;;sBAA2D,MAAM;SA2C5F,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,WAAW,yDActB,CAAA;AAEF,eAAe,WAAW,CAAA"}

package/dist/cjs/buttonGroup/buttonGroup.js

@@ -76,12 +76,12 @@ exports.ButtonGroupBase = core_1.styled.divBox `
   }
 
   > *:disabled {
-    border-color: disabled.border;
+    border-color: disabled .border;
   }
 
   //
   > .${utils_1.activeClassName} {
-    background-color: ${p => core_1.th.color(`${p.colorScheme}.${utils_1.activeItemShade}`)};
+    background-color: ${p => core_1.th.color('skyBlue.90')};
   }
 `;
 /**
@@ -89,9 +89,9 @@ exports.ButtonGroupBase = core_1.styled.divBox `
  * Exposes some props to the children via context.
  */
 exports.ButtonGroup = (0, core_1.vui)((props, ref) => {
-    const { className, colorScheme, disabled, innerBorderColor, size, variant } = props, rest = __rest(props, ["className", "colorScheme", "disabled", "innerBorderColor", "size", "variant"]);
-    const context = (0, react_1.useMemo)(() => (0, utils_1.filterUndefined)({ colorScheme, disabled, size, variant }), [colorScheme, disabled, size, variant]);
+    const { className, disabled, innerBorderColor, size, variant = 'secondaryDark' } = props, rest = __rest(props, ["className", "disabled", "innerBorderColor", "size", "variant"]);
+    const context = (0, react_1.useMemo)(() => (0, utils_1.filterUndefined)({ disabled, size, variant }), [disabled, size, variant]);
     return (react_1.default.createElement(context_1.ButtonGroupProvider, { value: context },
-        react_1.default.createElement(exports.ButtonGroupBase, Object.assign({ className: (0, utils_1.cs)('vui-buttonGroup', className) }, { colorScheme, innerBorderColor: innerBorderColor ? innerBorderColor : (0, helpers_1.getInnerBorderColor)(props), ref }, rest))));
+        react_1.default.createElement(exports.ButtonGroupBase, Object.assign({ className: (0, utils_1.cs)('vui-buttonGroup', className) }, { innerBorderColor: innerBorderColor ? innerBorderColor : (0, helpers_1.getInnerBorderColor)(props), ref }, rest))));
 });
 exports.default = exports.ButtonGroup;

package/dist/cjs/buttonGroup/buttonGroup.types.d.ts

@@ -1,9 +1,8 @@
-import { ButtonColorScheme } from '../button/button.types';
 import { SystemProps } from '../system';
 import { ThemingProps } from '../theme';
 export declare type ButtonGroupProps = SystemProps & ThemingProps<'ButtonGroup'> & {
-    /** Available theme colors for this component. */
-    colorScheme?: ButtonColorScheme;
+    /** Available theme colors for this component. @deprecated */
+    colorScheme?: string;
     /** Makes all wrapped buttons disabled. */
     disabled?: boolean;
     /** Border color between the buttons. */