@veracity/vui 1.7.0-redesign.5 → 1.7.0

package/dist/cjs/theme/foundations/index.d.ts

@@ -12,297 +12,6 @@ declare const _default: {
     };
     borders: {};
     colors: {
-        buttonTypePrimaryDefaultBorderColorDark: string;
-        buttonTypePrimaryDefaultBackgroundColorDark: string;
-        buttonTypePrimaryDefaultTextColorDark: string;
-        buttonTypePrimaryHoverBackgroundColorDark: string;
-        buttonTypePrimaryHoverBorderColorDark: string;
-        buttonTypePrimaryHoverTextColorDark: string;
-        buttonTypePrimaryActiveBackgroundColorDark: string;
-        buttonTypePrimaryActiveBorderColorDark: string;
-        buttonTypePrimaryActiveTextColorDark: string;
-        buttonTypePrimaryDefaultBorderColorLight: string;
-        buttonTypePrimaryDefaultBackgroundColorLight: string;
-        buttonTypePrimaryDefaultTextColorLight: string;
-        buttonTypePrimaryFocusOutline: string;
-        buttonTypePrimaryHoverBackgroundColorLight: string;
-        buttonTypePrimaryHoverBorderColorLight: string;
-        buttonTypePrimaryHoverTextColorLight: string;
-        buttonTypePrimaryActiveBackgroundColorLight: string;
-        buttonTypePrimaryActiveBorderColorLight: string;
-        buttonTypePrimaryActiveTextColorLight: string;
-        buttonTypeSecondaryDefaultBorderColorDark: string;
-        buttonTypeSecondaryDefaultBackgroundColorDark: string;
-        buttonTypeSecondaryDefaultTextColorDark: string;
-        buttonTypeSecondaryFocusOutline: string;
-        buttonTypeSecondaryHoverBackgroundColorDark: string;
-        buttonTypeSecondaryHoverBorderColorDark: string;
-        buttonTypeSecondaryHoverTextColorDark: string;
-        buttonTypeSecondaryActiveBackgroundColorDark: string;
-        buttonTypeSecondaryActiveBorderColorDark: string;
-        buttonTypeSecondaryActiveTextColorDark: string;
-        buttonTypeSecondaryDefaultBorderColorLight: string;
-        buttonTypeSecondaryDefaultBackgroundColorLight: string;
-        buttonTypeSecondaryDefaultTextColorLight: string;
-        buttonTypeSecondaryHoverBackgroundColorLight: string;
-        buttonTypeSecondaryHoverBorderColorLight: string;
-        buttonTypeSecondaryHoverTextColorLight: string;
-        buttonTypeSecondaryActiveBackgroundColorLight: string;
-        buttonTypeSecondaryActiveBorderColorLight: string;
-        buttonTypeSecondaryActiveTextColorLight: string;
-        buttonTypeTertiaryDefaultBorderColorDark: string;
-        buttonTypeTertiaryDefaultBackgroundColorDark: string;
-        buttonTypeTertiaryDefaultTextColorDark: string;
-        buttonTypeTertiaryHoverBackgroundColorDark: string;
-        buttonTypeTertiaryHoverBorderColorDark: string;
-        buttonTypeTertiaryHoverTextColorDark: string;
-        buttonTypeTertiaryFocusOutline: string;
-        buttonTypeTertiaryActiveBackgroundColorDark: string;
-        buttonTypeTertiaryActiveBorderColorDark: string;
-        buttonTypeTertiaryActiveTextColorDark: string;
-        buttonTypeTertiaryDefaultBorderColorLight: string;
-        buttonTypeTertiaryDefaultBackgroundColorLight: string;
-        buttonTypeTertiaryDefaultTextColorLight: string;
-        buttonTypeTertiaryHoverBackgroundColorLight: string;
-        buttonTypeTertiaryHoverBorderColorLight: string;
-        buttonTypeTertiaryHoverTextColorLight: string;
-        buttonTypeTertiaryActiveBackgroundColorLight: string;
-        buttonTypeTertiaryActiveBorderColorLight: string;
-        buttonTypeTertiaryActiveTextColorLight: string;
-        buttonDisabledCursor: string;
-        buttonDisabledOpacity: string;
-        darkBlue: {
-            95: string;
-            90: string;
-            85: string;
-            80: string;
-            75: string;
-            70: string;
-            65: string;
-            60: string;
-            55: string;
-            50: string;
-            45: string;
-            40: string;
-            35: string;
-            30: string;
-            25: string;
-            18: string;
-            15: string;
-            10: string;
-            5: string;
-        };
-        digiGreen: {
-            95: string;
-            90: string;
-            85: string;
-            80: string;
-            78: string;
-            70: string;
-            65: string;
-            60: string;
-            55: string;
-            50: string;
-            45: string;
-            40: string;
-            35: string;
-            30: string;
-            25: string;
-            20: string;
-            15: string;
-            10: string;
-            5: string;
-        };
-        earth: {
-            95: string;
-            89: string;
-            85: string;
-            80: string;
-            75: string;
-            70: string;
-            65: string;
-            60: string;
-            55: string;
-            50: string;
-            45: string;
-            40: string;
-            35: string;
-            30: string;
-            25: string;
-            20: string;
-            15: string;
-            10: string;
-            5: string;
-        };
-        energyRed: {
-            95: string;
-            90: string;
-            85: string;
-            80: string;
-            75: string;
-            70: string;
-            65: string;
-            60: string;
-            54: string;
-            50: string;
-            45: string;
-            40: string;
-            35: string;
-            30: string;
-            25: string;
-            20: string;
-            15: string;
-            10: string;
-            5: string;
-        };
-        focusColor: string;
-        landGreen: {
-            95: string;
-            90: string;
-            85: string;
-            80: string;
-            75: string;
-            70: string;
-            65: string;
-            60: string;
-            55: string;
-            50: string;
-            45: string;
-            41: string;
-            35: string;
-            30: string;
-            25: string;
-            20: string;
-            15: string;
-            10: string;
-            5: string;
-        };
-        sandstone: {
-            95: string;
-            90: string;
-            85: string;
-            79: string;
-            75: string;
-            70: string;
-            65: string;
-            60: string;
-            55: string;
-            50: string;
-            45: string;
-            40: string;
-            35: string;
-            30: string;
-            25: string;
-            20: string;
-            15: string;
-            10: string;
-            5: string;
-        };
-        seaBlue: {
-            95: string;
-            90: string;
-            85: string;
-            80: string;
-            75: string;
-            70: string;
-            65: string;
-            60: string;
-            55: string;
-            50: string;
-            45: string;
-            40: string;
-            35: string;
-            28: string;
-            25: string;
-            20: string;
-            15: string;
-            10: string;
-            5: string;
-        };
-        skyBlue: {
-            97: string;
-            95: string;
-            90: string;
-            85: string;
-            80: string;
-            77: string;
-            65: string;
-            60: string;
-            55: string;
-            50: string;
-            45: string;
-            40: string;
-            35: string;
-            30: string;
-            25: string;
-            20: string;
-            15: string;
-            10: string;
-            5: string;
-        };
-        sunflower: {
-            95: string;
-            90: string;
-            85: string;
-            80: string;
-            73: string;
-            70: string;
-            65: string;
-            60: string;
-            55: string;
-            50: string;
-            45: string;
-            40: string;
-            35: string;
-            30: string;
-            25: string;
-            20: string;
-            15: string;
-            10: string;
-            5: string;
-        };
-        terracotta: {
-            95: string;
-            90: string;
-            85: string;
-            80: string;
-            75: string;
-            70: string;
-            65: string;
-            60: string;
-            55: string;
-            50: string;
-            45: string;
-            40: string;
-            35: string;
-            30: string;
-            25: string;
-            20: string;
-            15: string;
-            10: string;
-            5: string;
-        };
-        warmGrey: {
-            95: string;
-            90: string;
-            85: string;
-            80: string;
-            75: string;
-            70: string;
-            65: string;
-            60: string;
-            56: string;
-            50: string;
-            45: string;
-            40: string;
-            35: string;
-            30: string;
-            25: string;
-            20: string;
-            15: string;
-            10: string;
-            5: string;
-        };
         blue: {
             10: string;
             20: string;
@@ -412,6 +121,7 @@ declare const _default: {
         regular: string;
         medium: string;
         demi: string;
+        bold: string;
     };
     gridTemplateColumns: {
         1: string;
@@ -440,7 +150,6 @@ declare const _default: {
         sm: number;
         md: number;
         lg: number;
-        xl: number;
         round: number;
     };
     ringWidths: {};

package/dist/cjs/theme/foundations/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/theme/foundations/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBA,wBAqBC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/theme/foundations/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBA,wBAqBC"}

package/dist/cjs/theme/foundations/radii.d.ts

@@ -1,13 +1,8 @@
 declare const _default: {
     none: number;
-    /** sm radius. @deprecated */
     sm: number;
-    /** md radius. @deprecated */
     md: number;
-    /** lg radius. @deprecated */
     lg: number;
-    /** xl radius. @deprecated */
-    xl: number;
     round: number;
 };
 export default _default;

package/dist/cjs/theme/foundations/radii.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"radii.d.ts","sourceRoot":"","sources":["../../../../src/theme/foundations/radii.ts"],"names":[],"mappings":";;IAEE,6BAA6B;;IAE7B,6BAA6B;;IAE7B,6BAA6B;;IAE7B,6BAA6B;;;;AAR/B,wBAWC"}
+{"version":3,"file":"radii.d.ts","sourceRoot":"","sources":["../../../../src/theme/foundations/radii.ts"],"names":[],"mappings":";;;;;;;AAAA,wBAMC"}

package/dist/cjs/theme/foundations/radii.js

@@ -2,13 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = {
     none: 0,
-    /** sm radius. @deprecated */
-    sm: 0,
-    /** md radius. @deprecated */
-    md: 2,
-    /** lg radius. @deprecated */
-    lg: 4,
-    /** xl radius. @deprecated */
-    xl: 6,
+    sm: 4,
+    md: 6,
+    lg: 10,
     round: 9999
 };

package/dist/cjs/toast/toast.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-export declare const toasterWidth = 388;
+export declare const toasterWidth = 420;
 declare const _default: React.MemoExoticComponent<() => JSX.Element>;
 export default _default;
 //# sourceMappingURL=toast.d.ts.map

package/dist/cjs/toast/toast.js

@@ -8,7 +8,7 @@ const react_1 = __importDefault(require("react"));
 const box_1 = require("../box");
 const core_1 = require("../core");
 const theme_1 = require("../theme");
-exports.toasterWidth = 388;
+exports.toasterWidth = 420;
 const Toaster = () => {
     var _a, _b;
     const { toasts } = (0, core_1.useVuiContext)();

package/dist/cjs/toast/useToast.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useToast.d.ts","sourceRoot":"","sources":["../../../src/toast/useToast.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAKxC,OAAO,EAAE,aAAa,EAAE,YAAY,EAAc,MAAM,eAAe,CAAA;AAEvE,eAAO,MAAM,eAAe,SAAS,CAAA;AACrC,eAAO,MAAM,iBAAiB,OAAO,CAAA;AACrC,eAAO,MAAM,iBAAiB,OAAO,CAAA;AAWrC,eAAO,MAAM,QAAQ;0BAKU,YAAY,KAAG,IAAI;oBAFzB,MAAM;qBAqCL,SAAS,aAAY,aAAa;wBAE/B,SAAS,aAAY,aAAa;wBAElC,SAAS,aAAY,aAAa;sBAEpC,SAAS,aAAY,aAAa;wBAEhC,SAAS,aAAY,aAAa;CAI9D,CAAA"}
+{"version":3,"file":"useToast.d.ts","sourceRoot":"","sources":["../../../src/toast/useToast.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAKxC,OAAO,EAAE,aAAa,EAAE,YAAY,EAAc,MAAM,eAAe,CAAA;AAEvE,eAAO,MAAM,eAAe,SAAS,CAAA;AACrC,eAAO,MAAM,iBAAiB,OAAO,CAAA;AACrC,eAAO,MAAM,iBAAiB,OAAO,CAAA;AAWrC,eAAO,MAAM,QAAQ;0BAKU,YAAY,KAAG,IAAI;oBAFzB,MAAM;qBAoCL,SAAS,aAAY,aAAa;wBAE/B,SAAS,aAAY,aAAa;wBAElC,SAAS,aAAY,aAAa;sBAEpC,SAAS,aAAY,aAAa;wBAEhC,SAAS,aAAY,aAAa;CAI9D,CAAA"}

package/dist/cjs/toast/useToast.js

@@ -32,7 +32,7 @@ const useToast = () => {
         const onClose = () => hideToast(id);
         const toast = {
             id,
-            component: (react_1.default.createElement(notification_1.Notification, { action: action, animation: "fadeDown", icon: icon, mt: { md: 1, sm: '4px', xs: '4px' }, onClose: onClose, shadow: 3, status: status, text: text, title: title, verticalAlign: "center", w: 1 }))
+            component: (react_1.default.createElement(notification_1.Notification, { action: action, animation: "fadeDown", icon: icon, mt: { md: 1, sm: '4px', xs: '4px' }, onClose: onClose, shadow: 1, status: status, text: text, title: title, w: 1 }))
         };
         addToast(toast);
         if (duration && duration !== 'sticky')

package/dist/cjs/tutorial/tutorialCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tutorialCard.d.ts","sourceRoot":"","sources":["../../../src/tutorial/tutorialCard.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,iBAAiB,EAAyC,MAAM,kBAAkB,CAAA;AAG3F,wBAAgB,YAAY,CAAC,EAC3B,SAAS,EACT,WAAW,EACX,KAAK,EACL,YAAY,EACZ,KAAK,EAAE,UAAe,EACtB,SAAS,EACT,QAAQ,EACT,EAAE,iBAAiB,eAiInB"}
+{"version":3,"file":"tutorialCard.d.ts","sourceRoot":"","sources":["../../../src/tutorial/tutorialCard.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,iBAAiB,EAAyC,MAAM,kBAAkB,CAAA;AAG3F,wBAAgB,YAAY,CAAC,EAC3B,SAAS,EACT,WAAW,EACX,KAAK,EACL,YAAY,EACZ,KAAK,EAAE,UAAe,EACtB,SAAS,EACT,QAAQ,EACT,EAAE,iBAAiB,eA0HnB"}

package/dist/cjs/tutorial/tutorialCard.js

@@ -51,15 +51,15 @@ function TutorialCard({ className, description, title, readMoreLink, steps: prop
     return (react_1.default.createElement(index_1.Card, { bg: "blue.100", className: className, color: "white", column: true, justifyContent: "space-between", minH: 200, w: 450 },
         react_1.default.createElement(index_1.Box, { alignContent: "center", alignItems: "center", display: "flex", flex: 0, flexDirection: "row", flexGrow: 0, justifyContent: "space-between", m: 2, mb: 1, minH: "48px", row: true, style: { WebkitFlexGrow: '0' } },
             react_1.default.createElement(index_1.H3, null, title),
-            !isFinalStep && (react_1.default.createElement(index_1.Button, { color: "white", hoverColor: "prussian.80", icon: "falTimes", onClick: onDismiss, scale: 2, variant: "tertiaryDark" }))),
+            !isFinalStep && (react_1.default.createElement(index_1.Button, { color: "white", hoverColor: "prussian.80", icon: "falTimes", onClick: onDismiss, scale: 2, variant: "text" }))),
         react_1.default.createElement(index_1.Box, { column: true, flex: 5, hidden: started, mx: 2 },
             react_1.default.createElement(index_1.T, { flexGrow: 1 }, description),
             react_1.default.createElement(index_1.Box, { alignItems: "center", flexDirection: "row-reverse", row: true },
                 react_1.default.createElement(index_1.Button, { bg: "white", color: "prussian.80", float: "right", mb: 0, onClick: () => setStarted(true), pb: 0 }, "Let's get started!"))),
         react_1.default.createElement(index_1.Box, { flex: 5, hidden: !started, mx: 2, row: true }, (_a = steps === null || steps === void 0 ? void 0 : steps.map) === null || _a === void 0 ? void 0 : _a.call(steps, s => (react_1.default.createElement(tutorialStep_1.TutorialStep, { active: s.key === activeStep, description: s.step.description, key: s.step.title, readMoreLink: s.step.readMoreLink, title: s.step.title })))),
         react_1.default.createElement(index_1.Box, { alignItems: "center", flex: 0, flexGrow: 0, hidden: !started, justifyContent: "space-between", m: 2, mt: 0, row: true, style: { WebkitFlexGrow: '0' } },
-            react_1.default.createElement(index_1.Button, { color: "white", disabled: isStartStep, disabledBg: "blue.100", disabledBorderColor: "blue.100", disabledColor: "prussian.80", focusBorderColor: "none", hoverBg: "none", hoverBorder: "none", hoverBorderColor: "blue.100", icon: "falArrowLeft", onClick: decrementStep, scale: 2, transition: "none", variant: "tertiaryDark", w: "80" }),
+            react_1.default.createElement(index_1.Button, { color: "white", disabled: isStartStep, disabledBg: "blue.100", disabledBorderColor: "blue.100", disabledColor: "prussian.80", focusBorderColor: "none", hoverBg: "none", hoverBorder: "none", hoverBorderColor: "blue.100", icon: "falArrowLeft", onClick: decrementStep, scale: 2, transition: "none", variant: "text", w: "80" }),
             react_1.default.createElement(index_1.Box, { className: "vuiTutorialStepDots" }, (_b = steps === null || steps === void 0 ? void 0 : steps.map) === null || _b === void 0 ? void 0 : _b.call(steps, s => (react_1.default.createElement(index_1.Icon, { color: s.key === activeStep ? 'white' : 'grey.70', key: s.key, name: "cusDotFull" })))),
-            isFinalStep ? (react_1.default.createElement(index_1.Button, { bg: "white", color: "prussian.80", hoverBg: "blue.30", hoverColor: "prussian.80", onClick: onFinish }, "Finish")) : (react_1.default.createElement(index_1.Button, { color: "white", focusBorderColor: "none", hoverBg: "none", hoverBorder: "none", hoverBorderColor: "blue.100", icon: "falArrowRight", onClick: incrementStep, scale: 2, transition: "none", variant: "tertiaryDark", w: "80" })))));
+            isFinalStep ? (react_1.default.createElement(index_1.Button, { bg: "white", color: "prussian.80", hoverBg: "blue.30", hoverColor: "prussian.80", onClick: onFinish }, "Finish")) : (react_1.default.createElement(index_1.Button, { color: "white", focusBorderColor: "none", hoverBg: "none", hoverBorder: "none", hoverBorderColor: "blue.100", icon: "falArrowRight", onClick: incrementStep, scale: 2, transition: "none", variant: "text", w: "80" })))));
 }
 exports.TutorialCard = TutorialCard;

package/dist/esm/avatar/avatar.js

@@ -23,7 +23,7 @@ export const AvatarBase = styled.spanBox `
 export const Avatar = vui((props, ref) => {
     const { children, className, getInitials = defaultGetInitials, icon, isInteractive = props.onClick !== undefined, isSquare, name = '', src, ...rest } = omitThemingProps(props);
     const { activeBg, h, hoverBg, iconSize, ...styles } = useStyleConfig('Avatar', props);
-    const borderRadius = isSquare ? 'none' : '50%';
+    const borderRadius = isSquare ? 'lg' : '50%';
     const initials = getInitials(name);
     const interactiveProps = isInteractive
         ? {

package/dist/esm/button/button.d.ts

@@ -4,7 +4,7 @@ import { ButtonProps } from './button.types';
 import ButtonIcon from './buttonIcon';
 import ButtonText from './buttonText';
 export declare const ButtonBase: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, import("..").AnimationProps & import("..").BackgroundColorProps & import("..").BorderProps & import("..").BorderTopProps & import("..").BorderRightProps & import("..").BorderBottomProps & import("..").BorderLeftProps & import("..").BorderColorProps & import("..").BorderTopColorProps & import("..").BorderRightColorProps & import("..").BorderBottomColorProps & import("..").BorderLeftColorProps & import("..").BorderWidthProps & import("..").BorderTopWidthProps & import("..").BorderRightWidthProps & import("..").BorderBottomWidthProps & import("..").BorderLeftWidthProps & import("..").BorderStyleProps & import("..").BorderRadiusProps & import("..").OutlineProps & import("..").OutlineColorProps & import("..").OutlineWidthProps & import("..").OutlineStyleProps & import("..").DivideXProps & import("..").DivideYProps & import("..").DivideXReverseProps & import("..").DivideYReverseProps & import("..").DivideColorProps & import("..").DivideStyleProps & import("..").RingProps & import("..").RingColorProps & import("..").OpacityProps & import("..").BoxShadowProps & import("..").TextShadowProps & import("..").DisplayProps & import("..").AlignItemsProps & import("..").AlignContentProps & import("..").JustifyContentProps & import("..").JustifyItemsProps & import("..").FlexWrapProps & import("..").FlexGrowProps & import("..").FlexShrinkProps & import("..").FlexBasisProps & import("..").FlexDirectionProps & import("..").FlexProps & import("..").JustifySelfProps & import("..").AlignSelfProps & import("..").OrderProps & import("../system/flexboxGrids").RowProps & import("../system/flexboxGrids").ColProps & import("../system/grids").GapProps & import("../system/grids").ColumnGapProps & import("../system/grids").RowGapProps & import("../system/grids").GridColumnProps & import("../system/grids").GridRowProps & import("../system/grids").GridAutoFlowProps & import("../system/grids").GridAutoColumnsProps & import("../system/grids").GridAutoRowsProps & import("../system/grids").GridTemplateColumnsProps & import("../system/grids").GridTemplateRowsProps & import("../system/grids").GridTemplateAreasProps & import("../system/grids").GridAreaProps & import("..").AppearanceProps & import("..").CursorProps & import("..").PointerEventsProps & import("..").ResizeProps & import("..").UserSelectProps & import("..").IsTruncatedProps & import("..").FloatProps & import("..").BoxSizingProps & import("..").OverflowProps & import("..").OverflowXProps & import("..").OverflowYProps & import("..").PositionProps & import("..").ZIndexProps & import("..").TopProps & import("..").RightProps & import("..").BottomProps & import("..").LeftProps & import("..").VisibilityProps & import("..").OverscrollBehaviorProps & import("..").ObjectFitProps & import("..").MaxLinesProps & import("..").WidthProps & import("..").HeightProps & import("..").MaxWidthProps & import("..").MaxHeightProps & import("..").MinWidthProps & import("..").MinHeightProps & import("..").MarginProps & import("..").MarginTopProps & import("..").MarginRightProps & import("..").MarginBottomProps & import("..").MarginLeftProps & import("..").MarginXProps & import("..").MarginYProps & import("..").PaddingProps & import("..").PaddingTopProps & import("..").PaddingRightProps & import("..").PaddingBottomProps & import("..").PaddingLeftProps & import("..").PaddingXProps & import("..").PaddingYProps & import("..").SpaceXProps & import("..").SpaceYProps & import("..").SpaceXReverseProps & import("..").SpaceYReverseProps & import("../system/tables").BorderCollapseProps & import("../system/tables").TableLayoutProps & import("..").TransformProps & import("..").TransformOriginProps & import("..").TranslateXProps & import("..").TranslateYProps & import("..").RotateProps & import("..").SkewXProps & import("..").SkewYProps & import("..").ScaleProps & import("..").ScaleXProps & import("..").ScaleYProps & import("..").TransitionProps & import("..").TransitionPropertyProps & import("..").TransitionDurationProps & import("..").TransitionTimingFunctionProps & import("..").TransitionDelayProps & import("..").FontFamilyProps & import("..").FontSizeProps & import("..").FontStyleProps & import("..").FontWeightProps & import("..").LineHeightProps & import("..").ColorProps & import("..").TextTransformProps & import("..").TextDecorationProps & import("..").TextAlignProps & import("..").VerticalAlignProps & import("..").LetterSpacingProps & import("..").WhiteSpaceProps & import("..").TextOverflowProps & import("..").ListStyleTypeProps & import("..").ListStylePositionProps & import("..").WordBreakProps & import("..").ThemingProps<"Button"> & {
-    colorScheme?: string | undefined;
+    colorScheme?: import("./button.types").ButtonColorScheme | undefined;
     icon?: JSX.Element | import("..").IconProp | undefined;
     iconLeft?: JSX.Element | import("..").IconProp | undefined;
     iconRight?: JSX.Element | import("..").IconProp | undefined;

package/dist/esm/button/button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/button/button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAA;AAGtC,OAAO,EAA+B,YAAY,EAAE,MAAM,SAAS,CAAA;AAEnE,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5C,OAAO,UAAU,MAAM,cAAc,CAAA;AACrC,OAAO,UAAU,MAAM,cAAc,CAAA;AAiBrC,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;SAatB,CAAA;AACD;;;;;;GAMG;AACH,eAAO,MAAM,MAAM;UAmHX,iBAAiB;UACjB,iBAAiB;CACxB,CAAA;AAKD,eAAe,MAAM,CAAA"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/button/button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAA;AAGtC,OAAO,EAA+B,YAAY,EAAE,MAAM,SAAS,CAAA;AAEnE,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5C,OAAO,UAAU,MAAM,cAAc,CAAA;AACrC,OAAO,UAAU,MAAM,cAAc,CAAA;AAiBrC,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;SAoBtB,CAAA;AACD;;;;;;GAMG;AACH,eAAO,MAAM,MAAM;UAqHX,iBAAiB;UACjB,iBAAiB;CACxB,CAAA;AAKD,eAAe,MAAM,CAAA"}

package/dist/esm/button/button.js

@@ -19,7 +19,7 @@ const StateWrapper = styled.span `
 `;
 export const ButtonBase = styled.buttonBox `
   align-items: center;
-  border-radius: none;
+  border-radius: md;
   display: inline-flex;
   flex-shrink: 0;
   font-weight: medium;
@@ -30,6 +30,13 @@ export const ButtonBase = 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.
@@ -41,41 +48,41 @@ export const ButtonBase = styled.buttonBox `
 export const Button = vui((props, ref) => {
     const buttonGroupProps = useButtonGroupContext();
     const mergedProps = { ...buttonGroupProps, ...props };
-    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, ...rest } = mergedProps;
+    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, ...rest } = mergedProps;
     const hasState = Boolean(state) && state !== 'idle';
     const states = { ...buttonStateMapping, ...stateMapping };
     const { iconProps: stateIconProps, ...stateProps } = states[state] ?? {};
-    const variant = filterUndefined({
-        variant: states[state]?.variant ?? variantProp
+    const colorScheme = filterUndefined({
+        colorScheme: states[state]?.colorScheme ?? colorSchemeProp
     });
-    const styles = useStyleConfig('Button', { ...mergedProps, ...variant });
+    const styles = useStyleConfig('Button', { ...mergedProps, ...colorScheme });
     const { borderWidth, h, spaceX = 0, ...buttonStyles } = styles.container;
-    const context = useMemo(() => filterUndefined({ disabled, size, variant }), [disabled, size, variant]);
+    const context = useMemo(() => filterUndefined({ colorScheme, disabled, size, variant }), [colorScheme, disabled, size, variant]);
     const Content = hasState ? ContentWrapper : React.Fragment;
     // Apply more space for text and less space for icons
-    const border = borderWidthProp ?? borderWidth ?? 1;
+    const border = borderWidthProp ?? borderWidth ?? 0;
     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,
-            disabledBg: 'bg',
-            disabledBorderColor: 'borderColor',
-            disabledColor: 'color',
-            hoverBg: 'bg',
-            hoverBorderColor: 'borderColor',
-            activeBg: 'bg',
+            activeBg: 'disabled.bg',
+            bg: 'disabled.bg',
+            borderColor: disabledBorderColor,
+            hoverBorderColor: disabledBorderColor,
+            color: 'disabled.color',
             cursor: 'not-allowed',
-            opacity: 0.5
+            hoverBg: 'disabled.bg'
         }
         : {};
     const aliasedProps = filterUndefined({
-        borderRadius: isRound ? h / 2 : 0,
+        borderRadius: isRound ? h / 2 : undefined,
         boxShadow: isElevated ? '2' : undefined,
         minW: icon ? 0 : undefined,
         pointerEvents: hasState ? 'none' : undefined,

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

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

package/dist/esm/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,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"}
+{"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"}

package/dist/esm/button/buttons.js

@@ -1,11 +1,11 @@
 import React from 'react';
 import { vui } from '../core';
 import Button from './button';
-export const AppButton = vui((props, ref) => (React.createElement(Button, { ref: ref, variant: "primaryDark", ...props })));
-export const BackButton = vui((props, ref) => (React.createElement(IconButton, { icon: "falArrowLeft", ref: ref, variant: "tertiaryDark", ...props })));
-export const CloseButton = vui((props, ref) => (React.createElement(IconButton, { icon: "falTimes", ref: ref, variant: "tertiaryDark", ...props })));
-export const CTAButton = vui((props, ref) => (React.createElement(Button, { ref: ref, variant: "solidGreen", ...props })));
-export const DangerButton = vui((props, ref) => (React.createElement(Button, { ref: ref, variant: "solidRed", ...props })));
-export const IconButton = vui((props, ref) => (React.createElement(Button, { ref: ref, variant: "tertiaryDark", ...props })));
-export const LineButton = vui((props, ref) => (React.createElement(Button, { ref: ref, variant: "secondaryDark", ...props })));
-export const TextButton = vui((props, ref) => (React.createElement(Button, { ref: ref, variant: "tertiaryDark", ...props })));
+export const AppButton = vui((props, ref) => (React.createElement(Button, { colorScheme: "blue", ref: ref, variant: "solid", ...props })));
+export const BackButton = vui((props, ref) => (React.createElement(IconButton, { colorScheme: "blue", icon: "falArrowLeft", ref: ref, variant: "text", ...props })));
+export const CloseButton = vui((props, ref) => (React.createElement(IconButton, { colorScheme: "blue", icon: "falTimes", ref: ref, variant: "text", ...props })));
+export const CTAButton = vui((props, ref) => (React.createElement(Button, { colorScheme: "green", ref: ref, variant: "solid", ...props })));
+export const DangerButton = vui((props, ref) => (React.createElement(Button, { colorScheme: "red", ref: ref, variant: "solid", ...props })));
+export const IconButton = vui((props, ref) => (React.createElement(Button, { colorScheme: "blue", ref: ref, variant: "text", ...props })));
+export const LineButton = vui((props, ref) => (React.createElement(Button, { colorScheme: "blue", ref: ref, variant: "outlined", ...props })));
+export const TextButton = vui((props, ref) => (React.createElement(Button, { colorScheme: "blue", ref: ref, variant: "text", ...props })));

package/dist/esm/button/consts.js

@@ -1,13 +1,13 @@
 export const buttonStateMapping = {
     error: {
-        variant: 'solidRed',
+        colorScheme: 'red',
         iconProps: {
             animation: 'fadeDown',
             icon: 'falTimesCircle'
         }
     },
     loading: {
-        variant: 'primaryDark',
+        colorScheme: 'blue',
         iconProps: {
             animation: 'vui-spin 0.6s linear infinite',
             name: 'fadSpinnerThird',
@@ -15,7 +15,7 @@ export const buttonStateMapping = {
         }
     },
     success: {
-        variant: 'solidGreen',
+        colorScheme: 'green',
         iconProps: {
             animation: 'fadeDown',
             icon: 'falCheckCircle'