@veracity/vui 1.9.1 → 2.0.0

package/dist/esm/badge/theme.js

@@ -0,0 +1,133 @@
+const baseStyle = {};
+const defaultProps = {
+    size: 'md',
+    variant: 'subtleSandstone'
+};
+const parts = ['container', 'icon', 'text'];
+const sizes = {
+    xs: {
+        container: {
+            borderRadius: 'lg',
+            fontSize: 'sm',
+            h: 20,
+            spaceX: 4
+        },
+        icon: {
+            size: 'xs'
+        }
+    },
+    sm: {
+        container: {
+            fontSize: 'sm',
+            h: 24,
+            spaceX: 4
+        },
+        icon: {
+            size: 'xs'
+        }
+    },
+    md: {
+        container: {
+            fontSize: 'sm',
+            h: 32,
+            spaceX: 6
+        },
+        icon: {
+            size: 'sm'
+        }
+    },
+    lg: {
+        container: {
+            fontSize: 'md',
+            h: 40,
+            spaceX: 8
+        },
+        icon: {
+            size: 'md'
+        }
+    }
+};
+const variants = {
+    subtleSandstone: {
+        container: {
+            bg: 'sandstone.95',
+            color: 'sandstone.20',
+            borderColor: 'transparent'
+        }
+    },
+    subtleEarth: {
+        container: {
+            bg: 'earth.95',
+            color: 'earth.20'
+        }
+    },
+    subtleBlue: {
+        container: {
+            bg: 'skyBlue.95',
+            color: 'seaBlue.28'
+        }
+    },
+    subtleBlue2: {
+        container: {
+            bg: 'skyBlue.95',
+            color: 'skyBlue.20'
+        }
+    },
+    subtleRed: {
+        container: {
+            bg: 'energyRed.95',
+            color: 'energyRed.45'
+        }
+    },
+    subtleYellow: {
+        container: {
+            bg: 'sunflower.85',
+            color: 'sunflower.20'
+        }
+    },
+    subtleGreen: {
+        container: {
+            bg: 'landGreen.95',
+            color: 'landGreen.30'
+        }
+    },
+    /** solids next */
+    solidBlue: {
+        container: {
+            bg: 'skyBlue.65',
+            color: 'skyBlue.20'
+        }
+    },
+    solidDarkBlue: {
+        container: {
+            bg: 'darkBlue.18',
+            borderColor: 'darkBlue.18',
+            color: 'white'
+        }
+    },
+    solidRed: {
+        container: {
+            bg: 'energyRed.45',
+            color: 'white'
+        }
+    },
+    solidYellow: {
+        container: {
+            bg: 'sunflower.65',
+            color: 'sunflower.20'
+        }
+    },
+    solidGreen: {
+        container: {
+            bg: 'landGreen.35',
+            color: 'white'
+        }
+    }
+};
+export default {
+    baseStyle,
+    defaultProps,
+    parts,
+    sizes,
+    variants
+};

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?: import("./button.types").ButtonColorScheme | undefined;
+    colorScheme?: string | undefined;
     dropDownIcon?: import("..").IconProp | undefined;
     icon?: JSX.Element | import("..").IconProp | undefined;
     iconLeft?: 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;;;;;;;;;;;;;;;;SAoBtB,CAAA;AACD;;;;;;GAMG;AACH,eAAO,MAAM,MAAM;UAsHX,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;;;;;;;;;;;;;;;;SAatB,CAAA;AACD;;;;;;GAMG;AACH,eAAO,MAAM,MAAM;UAoHX,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: md;
+  border-radius: none;
   display: inline-flex;
   flex-shrink: 0;
   font-weight: medium;
@@ -30,13 +30,6 @@ 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.
@@ -48,41 +41,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: colorSchemeProp, disabled, dropDownIcon = 'falAngleDown', 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 { borderWidth: borderWidthProp, children, className, colorScheme, disabled, dropDownIcon = 'falAngleDown', 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 hasState = Boolean(state) && state !== 'idle';
     const states = { ...buttonStateMapping, ...stateMapping };
     const { iconProps: stateIconProps, ...stateProps } = states[state] ?? {};
-    const colorScheme = filterUndefined({
-        colorScheme: states[state]?.colorScheme ?? colorSchemeProp
+    const variant = filterUndefined({
+        variant: states[state]?.variant ?? variantProp
     });
-    const styles = useStyleConfig('Button', { ...mergedProps, ...colorScheme });
+    const styles = useStyleConfig('Button', { ...mergedProps, ...variant });
     const { borderWidth, h, spaceX = 0, ...buttonStyles } = styles.container;
-    const context = useMemo(() => filterUndefined({ colorScheme, disabled, size, variant }), [colorScheme, disabled, size, variant]);
+    const context = useMemo(() => filterUndefined({ disabled, size, variant }), [disabled, size, variant]);
     const Content = hasState ? ContentWrapper : React.Fragment;
     // Apply more space for text and less space for icons
-    const border = borderWidthProp ?? borderWidth ?? 0;
+    const border = borderWidthProp ?? borderWidth ?? 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 = filterUndefined({
-        borderRadius: isRound ? h / 2 : undefined,
+        borderRadius: isRound ? h / 2 : 0,
         boxShadow: isElevated ? '2' : undefined,
         minW: icon ? 0 : undefined,
         pointerEvents: hasState ? 'none' : undefined,

package/dist/esm/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 for the drop-down element. @default falAngleDown */
     dropDownIcon?: IconProp;
     /** Icon that replaces any other content. */
@@ -38,7 +37,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/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,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,4DAA4D;IAC5D,YAAY,CAAC,EAAE,QAAQ,CAAA;IACvB,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,4DAA4D;IAC5D,YAAY,CAAC,EAAE,QAAQ,CAAA;IACvB,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/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, { 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 })));
+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 })));

package/dist/esm/button/consts.js

@@ -1,13 +1,13 @@
 export const 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',
@@ -15,7 +15,7 @@ export const buttonStateMapping = {
         }
     },
     success: {
-        colorScheme: 'green',
+        variant: 'solidGreen',
         iconProps: {
             animation: 'fadeDown',
             icon: 'falCheckCircle'

package/dist/esm/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,206 @@ 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;
+            };
+        };
+        primaryLight: {
+            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;
+            };
+        };
+        secondaryLight: {
+            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;
+            };
+        };
+        tertiaryLight: {
+            container: {
+                bg: string;
+                borderColor: string;
+                color: string;
+                hoverBg: string;
+                hoverBorderColor: string;
+                hoverColor: string;
+                activeBg: string;
+                activeBorderColor: string;
+                activeColor: string;
+            };
+        };
+        solidBlue: {
+            container: {
+                bg: string;
+                borderColor: string;
+                color: string;
+                disabledBg: string;
+                disabledBorderColor: string;
+                disabledColor: string;
+                hoverBg: string;
+                hoverBorderColor: string;
+                focusBg: string;
+                activeBg: string;
+                activeBorderColor: string;
+            };
+        };
+        blueOutlined: {
+            container: {
+                bg: string;
+                borderColor: string;
+                color: string;
+                disabledBg: string;
+                disabledBorderColor: string;
+                disabledColor: string;
+                hoverBg: string;
+                hoverBorderColor: string;
+                activeBg: string;
+                activeBorderColor: string;
+            };
+        };
+        blueText: {
+            container: {
+                bg: string;
+                borderColor: string;
+                color: string;
+                disabledBg: string;
+                disabledBorderColor: string;
+                disabledColor: string;
+                hoverBg: string;
+                hoverBorderColor: string;
+                focusBg: string;
+                activeBg: string;
+                activeBorderColor: 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/esm/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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+RA,wBAMC"}