@hero-design/rn 7.17.0 → 7.17.1

package/lib/index.js

@@ -2388,7 +2388,7 @@ var blue$1 = colorScales.blue,
     smalt = colorScales.smalt,
     violet$1 = colorScales.violet,
     yellow$1 = colorScales.yellow;
-var palette$6 = {
+({
   black: '#000000',
   white: '#ffffff',
   blue: blue$1.base,
@@ -2473,7 +2473,7 @@ var palette$6 = {
   yellowDark75: yellow$1.darken75,
   yellowLight60: yellow$1.lighten60,
   yellowLight90: yellow$1.lighten90
-};
+});
 var maasstrichtBlue = colorScales.maasstrichtBlue,
     grey$1 = colorScales.grey,
     pastelRed$1 = colorScales.pastelRed,
@@ -2563,7 +2563,7 @@ _objectSpread2(_objectSpread2({}, palette$5), {}, {
 var scarletGum = colorScales.scarletGum,
     violet1 = colorScales.violet1;
 
-_objectSpread2(_objectSpread2({}, palette$5), {}, {
+var palette$2 = _objectSpread2(_objectSpread2({}, palette$5), {}, {
   scarletGumLight30: scarletGum.lighten30,
   scarletGumLight50: scarletGum.lighten50,
   scarletGumLight80: scarletGum.lighten80,
@@ -2601,46 +2601,47 @@ _objectSpread2(_objectSpread2({}, palette$5), {}, {
 });
 
 var systemPalette = {
-  primary: palette$6.violet,
-  primaryLight: palette$6.violetLight60,
-  primaryDark: palette$6.purpleDark15,
-  primaryBackground: palette$6.violetLight90,
+  primary: palette$2.violet,
+  primaryLight: palette$2.violetLight50,
+  primaryDark: palette$2.scarletGumLight30,
+  primaryBackground: palette$2.violetLight90,
   primaryBackgroundDark: palette$5.maasstrichtBlueLight30,
-  secondary: palette$6.dodgerBlue,
-  secondaryLight: palette$6.dodgerBlueLight75,
-  secondaryBackground: palette$6.dodgerBlueLight90,
-  info: palette$6.dodgerBlue,
+  secondary: palette$2.ultramarineBlue,
+  secondaryLight: palette$2.vodka,
+  secondaryBackground: palette$2.aliceBlue,
+  info: palette$5.ultramarineBlue,
   infoMediumLight: palette$5.vodka,
-  infoLight: palette$6.dodgerBlueLight75,
-  infoBackground: palette$6.dodgerBlueLight90,
-  success: palette$6.green,
+  infoLight: palette$5.vodka,
+  infoBackground: palette$5.aliceBlue,
+  success: palette$5.emerald,
   successLight: palette$5.emerald,
-  successDark: palette$6.greenDark30,
-  successBackground: palette$6.grotesqueGreenLight90,
-  danger: palette$6.red,
+  successDark: palette$5.pineGreen,
+  successBackground: palette$5.honeydew,
+  danger: palette$5.vermilion,
   dangerMediumLight: palette$5.apple,
-  dangerLight: palette$6.redLight60,
-  dangerBackground: palette$6.redLight90,
-  warning: palette$6.orange,
+  dangerLight: palette$5.pastelRed,
+  dangerBackground: palette$5.linen,
+  warning: palette$5.mellowApricot,
   warningLight: palette$5.mellowApricot,
-  warningDark: palette$6.orangeDark15,
-  warningBackground: palette$6.orangeLight90,
-  platformBackground: palette$6.white,
-  backgroundLight: palette$6.greyLight95,
-  backgroundDark: palette$6.greyDark75,
-  text: palette$6.greyDark75,
-  subduedText: palette$6.greyDark30,
-  disabledText: palette$6.greyDark15,
-  disabledLightText: palette$6.greyLight45,
-  invertedText: palette$6.white,
-  outline: palette$6.greyLight60,
-  archived: palette$6.greyLight45,
+  warningDark: palette$5.deepSaffron,
+  warningBackground: palette$5.seashell,
+  platformBackground: palette$5.white,
+  backgroundLight: palette$5.greyLight90,
+  backgroundDark: palette$5.maasstrichtBlue,
+  text: palette$5.maasstrichtBlue,
+  subduedText: palette$5.maasstrichtBlueLight30,
+  disabledText: palette$5.maasstrichtBlueLight50,
+  disabledLightText: palette$5.greyLight30,
+  invertedText: palette$5.white,
+  outline: palette$5.greyLight75,
+  archived: palette$5.greyLight45,
   archivedLight: palette$5.greyLight30,
   archivedDark: palette$5.sonicSilver,
   archivedBackground: palette$5.antiFlashWhite,
-  black: palette$6.black,
-  inactiveBackground: palette$6.greyDark30,
-  shadow: palette$6.greyLight60
+  black: palette$5.black,
+  inactiveBackground: palette$5.maasstrichtBlueLight50,
+  shadow: palette$5.greyLight45 // waiting for new color
+
 };
 
 var BASE_WIDTH = 390; // Based on iPhone 13's viewport size
@@ -2786,9 +2787,9 @@ var getAlertTheme = function getAlertTheme(theme) {
   var colors = {
     success: theme.colors.success,
     warning: theme.colors.warning,
-    error: theme.colors.danger,
-    info: theme.colors.infoMediumLight,
-    divider: theme.colors.backgroundLight
+    error: theme.colors.dangerLight,
+    info: theme.colors.infoLight,
+    divider: theme.colors.outline
   };
   var sizes = {
     height: scale(48)
@@ -2858,7 +2859,7 @@ var getBadgeTheme = function getBadgeTheme(theme) {
     info: theme.colors.info,
     success: theme.colors.successDark,
     warning: theme.colors.warningDark,
-    archived: theme.colors.archived,
+    archived: theme.colors.archivedDark,
     text: theme.colors.invertedText
   };
   var fonts = {
@@ -3052,12 +3053,12 @@ var getCalendarTheme = function getCalendarTheme(theme) {
 
 var getCardTheme = function getCardTheme(theme) {
   var colors = {
-    dataCardIndicator: theme.colors.primaryDark,
+    dataCardIndicator: theme.colors.primary,
     indicator: {
       archived: theme.colors.archivedLight,
-      info: theme.colors.infoMediumLight,
-      success: theme.colors.successLight,
-      warning: theme.colors.warningLight,
+      info: theme.colors.infoLight,
+      success: theme.colors.success,
+      warning: theme.colors.warning,
       danger: theme.colors.dangerMediumLight
     }
   };
@@ -3292,11 +3293,11 @@ var getListTheme = function getListTheme(theme) {
     highlightedListItemContainerBackground: theme.colors.primaryBackground,
     listItemContainerBackground: theme.colors.platformBackground,
     leadingStatus: {
-      danger: theme.colors.danger,
+      danger: theme.colors.dangerMediumLight,
       info: theme.colors.infoLight,
-      success: theme.colors.successDark,
-      warning: theme.colors.warningLight,
-      archived: theme.colors.archived
+      success: theme.colors.success,
+      warning: theme.colors.warning,
+      archived: theme.colors.archivedLight
     }
   };
   var space = {
@@ -3381,16 +3382,15 @@ var getProgressTheme = function getProgressTheme(theme) {
   var colors = {
     primary: theme.colors.primary,
     success: theme.colors.success,
-    warning: theme.colors.warning,
+    warning: theme.colors.warningDark,
     danger: theme.colors.danger,
     info: theme.colors.info,
     background: theme.colors.outline,
     innerBackground: theme.colors.platformBackground
   };
   var sizes = {
-    radius: theme.space.xxxlarge,
-    strokeWidth: theme.space.small,
-    barHeight: theme.space.xsmall
+    circleWidth: scale(76),
+    barHeight: scale(4)
   };
   var radii = {
     "default": theme.radii.rounded
@@ -3741,9 +3741,9 @@ var getToastTheme = function getToastTheme(theme) {
   var colors = {
     success: theme.colors.success,
     warning: theme.colors.warning,
-    error: theme.colors.danger,
-    info: theme.colors.infoMediumLight,
-    divider: theme.colors.backgroundLight
+    error: theme.colors.dangerLight,
+    info: theme.colors.infoLight,
+    divider: theme.colors.outline
   };
   var sizes = {
     height: scale(48)
@@ -18358,7 +18358,7 @@ function ContentNavigator(_ref) {
   }));
 }
 
-var StyledContainer$3 = index$6(reactNative.View)(function (_ref) {
+var StyledContainer$4 = index$6(reactNative.View)(function (_ref) {
   var theme = _ref.theme;
   return {
     backgroundColor: theme.__hd__.calendar.colors.background
@@ -18547,7 +18547,7 @@ var Calendar = function Calendar(_ref) {
   var disableNextButton = maxDate === undefined ? false : !daysOfNextMonth.some(function (date) {
     return date !== undefined;
   }) || maxDate <= lastDateOfMonth;
-  return /*#__PURE__*/React__default["default"].createElement(StyledContainer$3, null, /*#__PURE__*/React__default["default"].createElement(StyledCalendarHeader, null, /*#__PURE__*/React__default["default"].createElement(ContentNavigator, {
+  return /*#__PURE__*/React__default["default"].createElement(StyledContainer$4, null, /*#__PURE__*/React__default["default"].createElement(StyledCalendarHeader, null, /*#__PURE__*/React__default["default"].createElement(ContentNavigator, {
     value: formatTime('MMMM yyyy', visibleDate),
     onPreviousPress: onPreviousPress,
     onNextPress: onNextPress,
@@ -18722,7 +18722,7 @@ var CheckBox = function CheckBox(_ref) {
   }));
 };
 
-var StyledContainer$2 = index$6(reactNative.View)(function (_ref) {
+var StyledContainer$3 = index$6(reactNative.View)(function (_ref) {
   var theme = _ref.theme;
   return {
     width: '100%',
@@ -18944,7 +18944,7 @@ var TextInput = function TextInput(_ref2) {
   });
   var shouldShowMaxLength = maxLength !== undefined;
   var theme = useTheme();
-  return /*#__PURE__*/React__default["default"].createElement(StyledContainer$2, {
+  return /*#__PURE__*/React__default["default"].createElement(StyledContainer$3, {
     style: style,
     pointerEvents: variant === 'disabled' || variant === 'readonly' ? 'none' : 'auto',
     testID: testID
@@ -19182,7 +19182,7 @@ var DatePicker = function DatePicker(props) {
 };
 
 var AnimatedPressable = reactNative.Animated.createAnimatedComponent(reactNative.Pressable);
-var StyledContainer$1 = index$6(reactNative.View)(function (_ref) {
+var StyledContainer$2 = index$6(reactNative.View)(function (_ref) {
   var theme = _ref.theme,
       enableShadow = _ref.enableShadow;
   return _objectSpread2(_objectSpread2({}, reactNative.StyleSheet.absoluteFillObject), {}, {
@@ -19247,7 +19247,7 @@ var Drawer = function Drawer(_ref) {
       return animation.stop();
     };
   }, [visible]);
-  return /*#__PURE__*/React__default["default"].createElement(StyledContainer$1, {
+  return /*#__PURE__*/React__default["default"].createElement(StyledContainer$2, {
     testID: testID,
     enableShadow: enableShadow,
     pointerEvents: "box-none"
@@ -19498,7 +19498,7 @@ var ActionItem = function ActionItem(_ref) {
   }), /*#__PURE__*/React__default["default"].createElement(StyledActionItemText, null, title));
 };
 
-var StyledContainer = index$6(reactNative.View)({
+var StyledContainer$1 = index$6(reactNative.View)({
   position: 'absolute',
   left: 0,
   right: 0,
@@ -19586,7 +19586,7 @@ var ActionGroup = function ActionGroup(_ref2) {
     inputRange: [0, 1],
     outputRange: [0, 1]
   });
-  return /*#__PURE__*/React__default["default"].createElement(StyledContainer, {
+  return /*#__PURE__*/React__default["default"].createElement(StyledContainer$1, {
     testID: testID,
     pointerEvents: "box-none",
     style: style
@@ -20036,41 +20036,52 @@ function PinInput(_ref2) {
   }));
 }
 
-var HalfCircleWrapper = index$6(reactNative.View)(function (_ref) {
+var INNER_CIRCLE_PERCENTAGE = 0.85; // 85% width according to design
+
+var STROKE_WIDTH_PERCENTAGE = 0.075; // 7.5% width  according to design
+
+var StyledContainer = index$6(reactNative.View)(function (_ref) {
   var theme = _ref.theme;
   return {
-    width: theme.__hd__.progress.sizes.radius,
-    height: theme.__hd__.progress.sizes.radius * 2,
+    flexDirection: 'row',
+    borderRadius: theme.__hd__.progress.radii["default"]
+  };
+});
+var StyledHalfCircleWrapper = index$6(reactNative.View)(function (_ref2) {
+  var theme = _ref2.theme;
+  return {
+    width: theme.__hd__.progress.sizes.circleWidth / 2,
+    height: theme.__hd__.progress.sizes.circleWidth,
     overflow: 'hidden'
   };
 });
-var HalfCircleInnerFG = index$6(reactNative.View)(function (_ref2) {
-  var theme = _ref2.theme,
-      themeIntent = _ref2.themeIntent;
+var StyledHalfCircleInnerFG = index$6(reactNative.View)(function (_ref3) {
+  var theme = _ref3.theme,
+      themeIntent = _ref3.themeIntent;
   return {
-    width: theme.__hd__.progress.sizes.radius * 2,
-    height: theme.__hd__.progress.sizes.radius * 2,
+    width: theme.__hd__.progress.sizes.circleWidth,
+    height: theme.__hd__.progress.sizes.circleWidth,
     backgroundColor: theme.__hd__.progress.colors[themeIntent],
     borderRadius: theme.__hd__.progress.radii["default"]
   };
 });
-var HalfCircleInnerBG = index$6(reactNative.View)(function (_ref3) {
-  var theme = _ref3.theme;
+var StyledHalfCircleInnerBG = index$6(reactNative.View)(function (_ref4) {
+  var theme = _ref4.theme;
   return {
-    width: theme.__hd__.progress.sizes.radius * 2,
-    height: theme.__hd__.progress.sizes.radius * 2,
+    width: theme.__hd__.progress.sizes.circleWidth,
+    height: theme.__hd__.progress.sizes.circleWidth,
     backgroundColor: theme.__hd__.progress.colors.background,
     borderRadius: theme.__hd__.progress.radii["default"]
   };
 });
-var DonutCircle = index$6(reactNative.View)(function (_ref4) {
-  var theme = _ref4.theme;
+var StyledDonutCircle = index$6(reactNative.View)(function (_ref5) {
+  var theme = _ref5.theme;
   return {
     position: 'absolute',
-    top: theme.__hd__.progress.sizes.strokeWidth,
-    left: theme.__hd__.progress.sizes.strokeWidth,
-    width: theme.__hd__.progress.sizes.radius * 2 - theme.__hd__.progress.sizes.strokeWidth * 2,
-    height: theme.__hd__.progress.sizes.radius * 2 - theme.__hd__.progress.sizes.strokeWidth * 2,
+    top: theme.__hd__.progress.sizes.circleWidth * STROKE_WIDTH_PERCENTAGE,
+    left: theme.__hd__.progress.sizes.circleWidth * STROKE_WIDTH_PERCENTAGE,
+    width: theme.__hd__.progress.sizes.circleWidth * INNER_CIRCLE_PERCENTAGE,
+    height: theme.__hd__.progress.sizes.circleWidth * INNER_CIRCLE_PERCENTAGE,
     zIndex: 3,
     backgroundColor: theme.__hd__.progress.colors.innerBackground,
     borderRadius: theme.__hd__.progress.radii["default"],
@@ -20078,15 +20089,15 @@ var DonutCircle = index$6(reactNative.View)(function (_ref4) {
     justifyContent: 'center'
   };
 });
-var StrokeEnd = index$6(reactNative.View)(function (_ref5) {
-  var theme = _ref5.theme,
-      themeIntent = _ref5.themeIntent;
+var StyledStrokeEnd = index$6(reactNative.View)(function (_ref6) {
+  var theme = _ref6.theme,
+      themeIntent = _ref6.themeIntent;
   return {
     position: 'absolute',
     top: 0,
-    left: theme.__hd__.progress.sizes.radius - theme.__hd__.progress.sizes.strokeWidth / 2,
-    width: theme.__hd__.progress.sizes.strokeWidth,
-    height: theme.__hd__.progress.sizes.strokeWidth,
+    left: theme.__hd__.progress.sizes.circleWidth / 2 - theme.__hd__.progress.sizes.circleWidth * STROKE_WIDTH_PERCENTAGE / 2,
+    width: theme.__hd__.progress.sizes.circleWidth * STROKE_WIDTH_PERCENTAGE,
+    height: theme.__hd__.progress.sizes.circleWidth * STROKE_WIDTH_PERCENTAGE,
     borderRadius: theme.__hd__.progress.radii["default"],
     backgroundColor: theme.__hd__.progress.colors[themeIntent],
     zIndex: 2
@@ -20099,7 +20110,7 @@ var HalfCircle = function HalfCircle(_ref) {
   var type = _ref.type,
       _ref$themeIntent = _ref.themeIntent,
       themeIntent = _ref$themeIntent === void 0 ? 'primary' : _ref$themeIntent;
-  return /*#__PURE__*/React__default["default"].createElement(HalfCircleWrapper, null, type === 'background' ? /*#__PURE__*/React__default["default"].createElement(HalfCircleInnerBG, null) : /*#__PURE__*/React__default["default"].createElement(HalfCircleInnerFG, {
+  return /*#__PURE__*/React__default["default"].createElement(StyledHalfCircleWrapper, null, type === 'background' ? /*#__PURE__*/React__default["default"].createElement(StyledHalfCircleInnerBG, null) : /*#__PURE__*/React__default["default"].createElement(StyledHalfCircleInnerFG, {
     themeIntent: themeIntent
   }));
 };
@@ -20113,7 +20124,7 @@ var ProgressCircle = function ProgressCircle(_ref2) {
       nativeProps = _objectWithoutProperties(_ref2, _excluded$3);
 
   var theme = useTheme$1();
-  var radius = theme.__hd__.progress.sizes.radius;
+  var radius = theme.__hd__.progress.sizes.circleWidth / 2;
   var progressAnimatedValue = React.useRef(new reactNative.Animated.Value(0));
   React.useEffect(function () {
     var animation = reactNative.Animated.timing(progressAnimatedValue.current, {
@@ -20151,11 +20162,7 @@ var ProgressCircle = function ProgressCircle(_ref2) {
   return /*#__PURE__*/React__default["default"].createElement(reactNative.View, _extends$1({}, nativeProps, {
     testID: testID,
     style: style
-  }), /*#__PURE__*/React__default["default"].createElement(reactNative.View, {
-    style: {
-      flexDirection: 'row'
-    }
-  }, /*#__PURE__*/React__default["default"].createElement(reactNative.View, null, /*#__PURE__*/React__default["default"].createElement(HalfCircle, {
+  }), /*#__PURE__*/React__default["default"].createElement(StyledContainer, null, /*#__PURE__*/React__default["default"].createElement(reactNative.View, null, /*#__PURE__*/React__default["default"].createElement(HalfCircle, {
     type: "foreground",
     themeIntent: intent
   }), /*#__PURE__*/React__default["default"].createElement(reactNative.Animated.View, {
@@ -20175,7 +20182,8 @@ var ProgressCircle = function ProgressCircle(_ref2) {
       transform: [{
         rotate: '180deg'
       }],
-      zIndex: 1
+      zIndex: 1,
+      marginLeft: -0.1
     }
   }, /*#__PURE__*/React__default["default"].createElement(HalfCircle, {
     type: "foreground",
@@ -20193,7 +20201,7 @@ var ProgressCircle = function ProgressCircle(_ref2) {
     })
   }, /*#__PURE__*/React__default["default"].createElement(HalfCircle, {
     type: "background"
-  }))), /*#__PURE__*/React__default["default"].createElement(StrokeEnd, {
+  }))), /*#__PURE__*/React__default["default"].createElement(StyledStrokeEnd, {
     themeIntent: intent
   }), /*#__PURE__*/React__default["default"].createElement(reactNative.Animated.View, {
     style: _objectSpread2(_objectSpread2({}, reactNative.StyleSheet.absoluteFillObject), {}, {
@@ -20202,10 +20210,10 @@ var ProgressCircle = function ProgressCircle(_ref2) {
         rotate: interpolateDotRotate
       }]
     })
-  }, /*#__PURE__*/React__default["default"].createElement(StrokeEnd, {
+  }, /*#__PURE__*/React__default["default"].createElement(StyledStrokeEnd, {
     themeIntent: intent
-  })), /*#__PURE__*/React__default["default"].createElement(DonutCircle, null, /*#__PURE__*/React__default["default"].createElement(Typography.Text, {
-    fontSize: "xlarge"
+  })), /*#__PURE__*/React__default["default"].createElement(StyledDonutCircle, null, /*#__PURE__*/React__default["default"].createElement(Typography.Text, {
+    fontSize: "large"
   }, "".concat(value, "%")))));
 };
 
@@ -40383,7 +40391,7 @@ var RichTextEditor = function RichTextEditor(_ref) {
         break;
     }
   }, []);
-  return /*#__PURE__*/React__default["default"].createElement(StyledContainer$2, {
+  return /*#__PURE__*/React__default["default"].createElement(StyledContainer$3, {
     style: style,
     testID: testID
   }, /*#__PURE__*/React__default["default"].createElement(StyledTextInputContainer, null, /*#__PURE__*/React__default["default"].createElement(StyledBorderBackDrop, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "7.17.0",
+  "version": "7.17.1",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -20,7 +20,7 @@
   "dependencies": {
     "@emotion/native": "^11.9.3",
     "@emotion/react": "^11.9.3",
-    "@hero-design/colors": "7.17.0",
+    "@hero-design/colors": "7.17.1",
     "date-fns": "^2.16.1",
     "events": "^3.2.0",
     "hero-editor": "^1.9.9"

package/src/components/Accordion/__tests__/__snapshots__/AccordionItem.spec.tsx.snap

@@ -38,7 +38,7 @@ exports[`AccordionItem renders correctly when header is an element 1`] = `
       style={
         Array [
           Object {
-            "color": "#292a2b",
+            "color": "#001f23",
             "fontFamily": "BeVietnamPro-Regular",
             "fontSize": 14,
             "letterSpacing": 0.42,
@@ -58,7 +58,7 @@ exports[`AccordionItem renders correctly when header is an element 1`] = `
       style={
         Array [
           Object {
-            "color": "#7622d7",
+            "color": "#8505a2",
             "fontSize": 20,
           },
           undefined,
@@ -111,7 +111,7 @@ exports[`AccordionItem renders correctly when header is an element 1`] = `
           style={
             Array [
               Object {
-                "color": "#292a2b",
+                "color": "#001f23",
                 "fontFamily": "BeVietnamPro-Regular",
                 "fontSize": 14,
                 "letterSpacing": 0.42,
@@ -170,7 +170,7 @@ exports[`AccordionItem renders correctly when header is string 1`] = `
       style={
         Array [
           Object {
-            "color": "#292a2b",
+            "color": "#001f23",
             "fontFamily": "BeVietnamPro-SemiBold",
             "fontSize": 16,
             "letterSpacing": 0.48,
@@ -190,7 +190,7 @@ exports[`AccordionItem renders correctly when header is string 1`] = `
       style={
         Array [
           Object {
-            "color": "#7622d7",
+            "color": "#8505a2",
             "fontSize": 20,
           },
           undefined,
@@ -243,7 +243,7 @@ exports[`AccordionItem renders correctly when header is string 1`] = `
           style={
             Array [
               Object {
-                "color": "#292a2b",
+                "color": "#001f23",
                 "fontFamily": "BeVietnamPro-Regular",
                 "fontSize": 14,
                 "letterSpacing": 0.42,
@@ -302,7 +302,7 @@ exports[`AccordionItem renders correctly when open 1`] = `
       style={
         Array [
           Object {
-            "color": "#292a2b",
+            "color": "#001f23",
             "fontFamily": "BeVietnamPro-SemiBold",
             "fontSize": 16,
             "letterSpacing": 0.48,
@@ -322,7 +322,7 @@ exports[`AccordionItem renders correctly when open 1`] = `
       style={
         Array [
           Object {
-            "color": "#7622d7",
+            "color": "#8505a2",
             "fontSize": 20,
           },
           undefined,
@@ -375,7 +375,7 @@ exports[`AccordionItem renders correctly when open 1`] = `
           style={
             Array [
               Object {
-                "color": "#292a2b",
+                "color": "#001f23",
                 "fontFamily": "BeVietnamPro-Regular",
                 "fontSize": 14,
                 "letterSpacing": 0.42,
@@ -434,7 +434,7 @@ exports[`AccordionItem renders correctly when variant is card 1`] = `
       style={
         Array [
           Object {
-            "color": "#292a2b",
+            "color": "#001f23",
             "fontFamily": "BeVietnamPro-SemiBold",
             "fontSize": 16,
             "letterSpacing": 0.48,
@@ -454,7 +454,7 @@ exports[`AccordionItem renders correctly when variant is card 1`] = `
       style={
         Array [
           Object {
-            "color": "#7622d7",
+            "color": "#8505a2",
             "fontSize": 20,
           },
           undefined,
@@ -507,7 +507,7 @@ exports[`AccordionItem renders correctly when variant is card 1`] = `
           style={
             Array [
               Object {
-                "color": "#292a2b",
+                "color": "#001f23",
                 "fontFamily": "BeVietnamPro-Regular",
                 "fontSize": 14,
                 "letterSpacing": 0.42,