@veracity/vui 1.9.1 → 2.0.0

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

@@ -12,6 +12,297 @@ 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;
@@ -121,7 +412,6 @@ declare const _default: {
         regular: string;
         medium: string;
         demi: string;
-        bold: string;
     };
     gridTemplateColumns: {
         1: string;
@@ -150,6 +440,7 @@ declare const _default: {
         sm: number;
         md: number;
         lg: number;
+        xl: number;
         round: number;
     };
     ringWidths: {};

package/dist/esm/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/esm/theme/foundations/radii.d.ts

@@ -1,8 +1,13 @@
 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/esm/theme/foundations/radii.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"radii.d.ts","sourceRoot":"","sources":["../../../../src/theme/foundations/radii.ts"],"names":[],"mappings":";;;;;;;AAAA,wBAMC"}
+{"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"}

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

@@ -1,7 +1,12 @@
 export default {
     none: 0,
-    sm: 4,
-    md: 6,
-    lg: 10,
+    /** sm radius. @deprecated */
+    sm: 0,
+    /** md radius. @deprecated */
+    md: 2,
+    /** lg radius. @deprecated */
+    lg: 4,
+    /** xl radius. @deprecated */
+    xl: 6,
     round: 9999
 };

package/dist/esm/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;qBAoCL,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;qBAqCL,SAAS,aAAY,aAAa;wBAE/B,SAAS,aAAY,aAAa;wBAElC,SAAS,aAAY,aAAa;sBAEpC,SAAS,aAAY,aAAa;wBAEhC,SAAS,aAAY,aAAa;CAI9D,CAAA"}

package/dist/esm/toast/useToast.js

@@ -26,7 +26,7 @@ export const useToast = () => {
         const onClose = () => hideToast(id);
         const toast = {
             id,
-            component: (React.createElement(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 }))
+            component: (React.createElement(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 }))
         };
         addToast(toast);
         if (duration && duration !== 'sticky')

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

package/dist/esm/tutorial/tutorialCard.js

@@ -24,14 +24,14 @@ export function TutorialCard({ className, description, title, readMoreLink, step
     return (React.createElement(Card, { bg: "blue.100", className: className, color: "white", column: true, justifyContent: "space-between", minH: 200, w: 450 },
         React.createElement(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.createElement(H3, null, title),
-            !isFinalStep && (React.createElement(Button, { color: "white", hoverColor: "prussian.80", icon: "falTimes", onClick: onDismiss, scale: 2, variant: "text" }))),
+            !isFinalStep && (React.createElement(Button, { color: "white", hoverColor: "prussian.80", icon: "falTimes", onClick: onDismiss, scale: 2, variant: "tertiaryDark" }))),
         React.createElement(Box, { column: true, flex: 5, hidden: started, mx: 2 },
             React.createElement(T, { flexGrow: 1 }, description),
             React.createElement(Box, { alignItems: "center", flexDirection: "row-reverse", row: true },
                 React.createElement(Button, { bg: "white", color: "prussian.80", float: "right", mb: 0, onClick: () => setStarted(true), pb: 0 }, "Let's get started!"))),
         React.createElement(Box, { flex: 5, hidden: !started, mx: 2, row: true }, steps?.map?.(s => (React.createElement(TutorialStep, { active: s.key === activeStep, description: s.step.description, key: s.step.title, readMoreLink: s.step.readMoreLink, title: s.step.title })))),
         React.createElement(Box, { alignItems: "center", flex: 0, flexGrow: 0, hidden: !started, justifyContent: "space-between", m: 2, mt: 0, row: true, style: { WebkitFlexGrow: '0' } },
-            React.createElement(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.createElement(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.createElement(Box, { className: "vuiTutorialStepDots" }, steps?.map?.(s => (React.createElement(Icon, { color: s.key === activeStep ? 'white' : 'grey.70', key: s.key, name: "cusDotFull" })))),
-            isFinalStep ? (React.createElement(Button, { bg: "white", color: "prussian.80", hoverBg: "blue.30", hoverColor: "prussian.80", onClick: onFinish }, "Finish")) : (React.createElement(Button, { color: "white", focusBorderColor: "none", hoverBg: "none", hoverBorder: "none", hoverBorderColor: "blue.100", icon: "falArrowRight", onClick: incrementStep, scale: 2, transition: "none", variant: "text", w: "80" })))));
+            isFinalStep ? (React.createElement(Button, { bg: "white", color: "prussian.80", hoverBg: "blue.30", hoverColor: "prussian.80", onClick: onFinish }, "Finish")) : (React.createElement(Button, { color: "white", focusBorderColor: "none", hoverBg: "none", hoverBorder: "none", hoverBorderColor: "blue.100", icon: "falArrowRight", onClick: incrementStep, scale: 2, transition: "none", variant: "tertiaryDark", w: "80" })))));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veracity/vui",
-  "version": "1.9.1",
+  "version": "2.0.0",
   "description": "Veracity UI is a React component library crafted for use within Veracity applications and pages. Based on Styled Components and @xstyled.",
   "module": "./dist/esm/index.js",
   "main": "./dist/cjs/index.js",

package/src/avatar/avatar.tsx

@@ -38,7 +38,7 @@ export const Avatar = vui<'span', AvatarProps>((props, ref) => {
   } = omitThemingProps(props)
   const { activeBg, h, hoverBg, iconSize, ...styles } = useStyleConfig('Avatar', props)
 
-  const borderRadius = isSquare ? 'lg' : '50%'
+  const borderRadius = isSquare ? 'none' : '50%'
   const initials = getInitials(name)
 
   const interactiveProps = isInteractive

package/src/badge/badge.tsx

@@ -0,0 +1,36 @@
+import React from 'react'
+
+import { vui } from '../core'
+import { Tag, TagProps } from '../tag'
+import { Dict } from '../utils'
+import { BadgeProps } from './badge.types'
+import theme from './theme'
+
+/**
+ * Badges are round, non-interactive tags.
+ *
+ * These components are used for displaying information only; they might be used as a “counter” for push notifications.
+ */
+
+export const Badge = vui<'span', BadgeProps>(props => {
+  const { variant, ...rest } = props as TagProps
+  const { variants } = (theme as Dict) ?? {}
+
+  const bg = variants[variant ?? 'subtleSandstone'].container.bg
+  const color = variants[variant ?? 'subtleSandstone'].container.color
+
+  return (
+    <Tag
+      bg={bg}
+      className="vui-badge"
+      color={color}
+      isInteractive={false}
+      isRound
+      minW="20px"
+      {...rest}
+      onDelete={undefined}
+    />
+  )
+})
+
+export default Badge

package/src/badge/badge.types.ts

@@ -0,0 +1,17 @@
+import { IconProp } from '../icon'
+import { SystemProps } from '../system'
+import { TagInnerProps } from '../tag'
+import { ThemingProps } from '../theme'
+
+export type BadgeInnerProps = {
+  /** Icon that replaces any other content. */
+  icon?: IconProp | JSX.Element
+  /** Socket displaying icon on the left side. */
+  iconLeft?: IconProp | JSX.Element
+  /** Socket displaying icon on the right side. */
+  iconRight?: IconProp | JSX.Element
+  /** Socket displaying text as alternative to children. */
+  text?: React.ReactNode
+}
+
+export type BadgeProps = SystemProps & ThemingProps<'Badge'> & TagInnerProps & BadgeInnerProps

package/src/badge/index.ts

@@ -0,0 +1,2 @@
+export * from './badge'
+export { default } from './badge'

package/src/badge/theme.ts

@@ -0,0 +1,140 @@
+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
+}