@veracity/vui 1.7.0-redesign.6 → 1.7.1

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

@@ -24,6 +24,8 @@ export declare type AccordionItemProps = ListItemProps & {
     children?: ReactNode;
     /** Alternative way to provide content */
     content?: ReactNode;
+    /** Control the padding of the content */
+    contentPx?: string | number;
     /** Collapsed state */
     collapsed?: boolean;
     /** Hover color for the item title @default "blue.10" */

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

@@ -1 +1 @@
-{"version":3,"file":"accordion.types.d.ts","sourceRoot":"","sources":["../../../src/accordion/accordion.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AACvC,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,oBAAY,WAAW,GAAG,UAAU,GAAG,YAAY,CAAA;AAEnD,oBAAY,cAAc,GAAG,WAAW,GACtC,YAAY,CAAC,WAAW,CAAC,GAAG;IAC1B,4CAA4C;IAC5C,WAAW,CAAC,EAAE,WAAW,CAAA;IACzB,wDAAwD;IACxD,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,KAAK,CAAC,EAAE,kBAAkB,EAAE,CAAA;CAC7B,CAAA;AAEH,oBAAY,eAAe,GAAG,MAAM,GAAG,MAAM,CAAA;AAE7C,oBAAY,sBAAsB,GAAG;IACnC,EAAE,EAAE,eAAe,CAAA;IACnB,SAAS,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,oBAAY,kBAAkB,GAAG,aAAa,GAAG;IAC/C,gBAAgB;IAChB,EAAE,EAAE,eAAe,CAAA;IACnB,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,cAAc;IACd,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,yCAAyC;IACzC,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,sBAAsB;IACtB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,wDAAwD;IACxD,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,YAAY;IACZ,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC1B,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,sBAAsB,KAAK,IAAI,CAAA;CACnD,CAAA;AAED,oBAAY,uBAAuB,GAAG;IACpC,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,WAAW,CAAC,EAAE,WAAW,CAAA;CAC1B,CAAA"}
+{"version":3,"file":"accordion.types.d.ts","sourceRoot":"","sources":["../../../src/accordion/accordion.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AACvC,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,oBAAY,WAAW,GAAG,UAAU,GAAG,YAAY,CAAA;AAEnD,oBAAY,cAAc,GAAG,WAAW,GACtC,YAAY,CAAC,WAAW,CAAC,GAAG;IAC1B,4CAA4C;IAC5C,WAAW,CAAC,EAAE,WAAW,CAAA;IACzB,wDAAwD;IACxD,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,KAAK,CAAC,EAAE,kBAAkB,EAAE,CAAA;CAC7B,CAAA;AAEH,oBAAY,eAAe,GAAG,MAAM,GAAG,MAAM,CAAA;AAE7C,oBAAY,sBAAsB,GAAG;IACnC,EAAE,EAAE,eAAe,CAAA;IACnB,SAAS,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,oBAAY,kBAAkB,GAAG,aAAa,GAAG;IAC/C,gBAAgB;IAChB,EAAE,EAAE,eAAe,CAAA;IACnB,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,cAAc;IACd,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,yCAAyC;IACzC,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,yCAAyC;IACzC,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC3B,sBAAsB;IACtB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,wDAAwD;IACxD,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,YAAY;IACZ,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC1B,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,sBAAsB,KAAK,IAAI,CAAA;CACnD,CAAA;AAED,oBAAY,uBAAuB,GAAG;IACpC,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,WAAW,CAAC,EAAE,WAAW,CAAA;CAC1B,CAAA"}

package/dist/cjs/accordion/accordionItemHorizontal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"accordionItemHorizontal.d.ts","sourceRoot":"","sources":["../../../src/accordion/accordionItemHorizontal.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAA;AAItD,kDAAkD;AAClD,eAAO,MAAM,uBAAuB,UAAW,kBAAkB,gBAmFhE,CAAA;AAED,eAAe,uBAAuB,CAAA"}
+{"version":3,"file":"accordionItemHorizontal.d.ts","sourceRoot":"","sources":["../../../src/accordion/accordionItemHorizontal.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAA;AAItD,kDAAkD;AAClD,eAAO,MAAM,uBAAuB,UAAW,kBAAkB,gBAsFhE,CAAA;AAED,eAAe,uBAAuB,CAAA"}

package/dist/cjs/accordion/accordionItemHorizontal.js

@@ -46,7 +46,7 @@ const accordionItemArrow_1 = __importDefault(require("./accordionItemArrow"));
 const context_1 = require("./context");
 /** An accordion item (horizontal orientation). */
 const AccordionItemHorizontal = (props) => {
-    const _a = (0, core_1.omitThemingProps)(props), { className, children, collapsed, content, disabled, id, itemTitleHoverBg = 'blue.10', title, onToggle } = _a, rest = __rest(_a, ["className", "children", "collapsed", "content", "disabled", "id", "itemTitleHoverBg", "title", "onToggle"]);
+    const _a = (0, core_1.omitThemingProps)(props), { className, children, collapsed, content, disabled, id, contentPx, itemTitleHoverBg = 'blue.10', title, onToggle } = _a, rest = __rest(_a, ["className", "children", "collapsed", "content", "disabled", "id", "contentPx", "itemTitleHoverBg", "title", "onToggle"]);
     const [collapsedInternal, setIsCollapsedInternal] = (0, react_1.useState)(false);
     const styles = (0, core_1.useStyleConfig)('Accordion', (0, context_1.useAccordionContext)());
     (0, react_1.useEffect)(() => {
@@ -60,11 +60,12 @@ const AccordionItemHorizontal = (props) => {
     };
     const cursor = disabled ? 'not-allowed' : 'pointer';
     const fontWeight = typeof title === 'string' ? '500' : 'inherit';
+    const expandedContentPx = contentPx ? contentPx : styles.item.pt;
     return (react_1.default.createElement(box_1.default, Object.assign({ alignItems: collapsedInternal ? 'normal' : 'baseline', bg: disabled ? 'disabled.bg' : undefined, borderRight: "1px solid grey.40", className: (0, utils_1.cs)('vui-accordion-item-horizontal', className), color: disabled ? 'disabled.color' : undefined, column: true, cursor: disabled ? 'not-allowed' : undefined, id: `${id}`, maxW: collapsedInternal ? styles.item.minH : 'auto', minW: styles.item.minH, p: 0, transitionDuration: "0ms", userSelect: disabled ? 'none' : undefined }, rest),
         react_1.default.createElement(box_1.default, Object.assign({}, styles.item, { cursor: cursor, hoverBg: itemTitleHoverBg, justifyContent: "space-between", minH: styles.item.minH, onClick: toggle, p: styles.item.pt, w: "100%" }),
             !collapsedInternal && react_1.default.createElement(box_1.default, { fontWeight: fontWeight }, title),
             react_1.default.createElement(accordionItemArrow_1.default, { collapsed: collapsedInternal, orientation: "horizontal" })),
-        !collapsedInternal ? (react_1.default.createElement(box_1.default, { p: styles.item.pt, pt: 0, transitionDuration: "0ms" }, children !== null && children !== void 0 ? children : content)) : (react_1.default.createElement(box_1.default, { cursor: cursor, flexDirection: "row-reverse", fontWeight: fontWeight, mb: styles.item.minH, mt: styles.item.pt, onClick: toggle, transform: "rotate(-90deg)", transitionDuration: "0ms", whiteSpace: "nowrap" }, title))));
+        !collapsedInternal ? (react_1.default.createElement(box_1.default, { p: styles.item.pt, pt: 0, px: expandedContentPx, transitionDuration: "0ms", w: 1 }, children !== null && children !== void 0 ? children : content)) : (react_1.default.createElement(box_1.default, { cursor: cursor, flexDirection: "row-reverse", fontWeight: fontWeight, mb: styles.item.minH, mt: styles.item.pt, onClick: toggle, transform: "rotate(-90deg)", transitionDuration: "0ms", whiteSpace: "nowrap" }, title))));
 };
 exports.AccordionItemHorizontal = AccordionItemHorizontal;
 exports.default = exports.AccordionItemHorizontal;

package/dist/cjs/avatar/avatar.js

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

package/dist/cjs/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/cjs/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/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: none;
+  border-radius: md;
   display: inline-flex;
   flex-shrink: 0;
   font-weight: medium;
@@ -70,6 +70,13 @@ 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.
@@ -82,41 +89,41 @@ 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, 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 { 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 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 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 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 styles = (0, core_1.useStyleConfig)('Button', Object.assign(Object.assign({}, mergedProps), variant));
+    const styles = (0, core_1.useStyleConfig)('Button', Object.assign(Object.assign({}, mergedProps), colorScheme));
     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)({ disabled, size, variant }), [disabled, size, variant]);
+    const context = (0, react_1.useMemo)(() => (0, utils_1.filterUndefined)({ colorScheme, disabled, size, variant }), [colorScheme, 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 : 1;
+    const border = (_d = borderWidthProp !== null && borderWidthProp !== void 0 ? borderWidthProp : borderWidth) !== null && _d !== void 0 ? _d : 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 = (0, utils_1.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/cjs/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/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,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/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({ 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))));
+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))));

package/dist/cjs/button/consts.js

@@ -3,14 +3,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.buttonStateMapping = void 0;
 exports.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',
@@ -18,7 +18,7 @@ exports.buttonStateMapping = {
         }
     },
     success: {
-        variant: 'solidGreen',
+        colorScheme: 'green',
         iconProps: {
             animation: 'fadeDown',
             icon: 'falCheckCircle'

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

@@ -1,12 +1,49 @@
+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: {
-        sm: {
+        xs: {
             container: {
                 fontSize: string;
                 h: number;
@@ -18,7 +55,7 @@ declare const _default: {
             };
             text: {};
         };
-        md: {
+        sm: {
             container: {
                 fontSize: string;
                 h: number;
@@ -30,7 +67,7 @@ declare const _default: {
             };
             text: {};
         };
-        lg: {
+        md: {
             container: {
                 fontSize: string;
                 h: number;
@@ -42,7 +79,7 @@ declare const _default: {
             };
             text: {};
         };
-        xl: {
+        lg: {
             container: {
                 fontSize: string;
                 h: number;
@@ -56,123 +93,9 @@ declare const _default: {
         };
     };
     variants: {
-        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;
-            };
-        };
+        outlined: typeof variantOutlined;
+        solid: typeof variantSolid;
+        text: typeof variantText;
     };
 };
 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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyMA,wBAMC"}
+{"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"}