@hero-design/rn 7.17.0 → 7.17.1

package/src/theme/components/toast.ts

@@ -5,9 +5,9 @@ const getToastTheme = (theme: GlobalTheme) => {
   const 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,
   };
 
   const sizes = {

package/src/theme/global/colors.ts

@@ -1,48 +1,49 @@
-import palette, {
-  defaultMobilePalette as mobilePalette,
+import {
+  defaultMobilePalette as palette,
+  swagPalette,
 } from '@hero-design/colors';
 
 const systemPalette = {
-  primary: palette.violet,
-  primaryLight: palette.violetLight60,
-  primaryDark: palette.purpleDark15,
-  primaryBackground: palette.violetLight90,
-  primaryBackgroundDark: mobilePalette.maasstrichtBlueLight30,
-  secondary: palette.dodgerBlue,
-  secondaryLight: palette.dodgerBlueLight75,
-  secondaryBackground: palette.dodgerBlueLight90,
-  info: palette.dodgerBlue,
-  infoMediumLight: mobilePalette.vodka,
-  infoLight: palette.dodgerBlueLight75,
-  infoBackground: palette.dodgerBlueLight90,
-  success: palette.green,
-  successLight: mobilePalette.emerald,
-  successDark: palette.greenDark30,
-  successBackground: palette.grotesqueGreenLight90,
-  danger: palette.red,
-  dangerMediumLight: mobilePalette.apple,
-  dangerLight: palette.redLight60,
-  dangerBackground: palette.redLight90,
-  warning: palette.orange,
-  warningLight: mobilePalette.mellowApricot,
-  warningDark: palette.orangeDark15,
-  warningBackground: palette.orangeLight90,
+  primary: swagPalette.violet,
+  primaryLight: swagPalette.violetLight50, // no longer needed after revising Button
+  primaryDark: swagPalette.scarletGumLight30, // DEPRECATED
+  primaryBackground: swagPalette.violetLight90,
+  primaryBackgroundDark: palette.maasstrichtBlueLight30,
+  secondary: swagPalette.ultramarineBlue, // no longer needed after revising Button
+  secondaryLight: swagPalette.vodka, // no longer needed after revising Button
+  secondaryBackground: swagPalette.aliceBlue, // no longer needed after revising Button
+  info: palette.ultramarineBlue,
+  infoMediumLight: palette.vodka, // DEPRECATED, use infoLight instead
+  infoLight: palette.vodka,
+  infoBackground: palette.aliceBlue,
+  success: palette.emerald,
+  successLight: palette.emerald, // DEPRECATED, use success instead
+  successDark: palette.pineGreen,
+  successBackground: palette.honeydew,
+  danger: palette.vermilion,
+  dangerMediumLight: palette.apple, // should be dangerDark?
+  dangerLight: palette.pastelRed,
+  dangerBackground: palette.linen,
+  warning: palette.mellowApricot,
+  warningLight: palette.mellowApricot, // DEPRECATED, use warning instead
+  warningDark: palette.deepSaffron,
+  warningBackground: palette.seashell,
   platformBackground: palette.white,
-  backgroundLight: palette.greyLight95,
-  backgroundDark: palette.greyDark75,
-  text: palette.greyDark75, // should be Maastricht Blue
-  subduedText: palette.greyDark30,
-  disabledText: palette.greyDark15,
-  disabledLightText: palette.greyLight45,
+  backgroundLight: palette.greyLight90,
+  backgroundDark: palette.maasstrichtBlue,
+  text: palette.maasstrichtBlue,
+  subduedText: palette.maasstrichtBlueLight30, // secondary
+  disabledText: palette.maasstrichtBlueLight50, // readonly
+  disabledLightText: palette.greyLight30, // disabled
   invertedText: palette.white,
-  outline: palette.greyLight60,
-  archived: palette.greyLight45,
-  archivedLight: mobilePalette.greyLight30,
-  archivedDark: mobilePalette.sonicSilver,
-  archivedBackground: mobilePalette.antiFlashWhite,
+  outline: palette.greyLight75, // divider
+  archived: palette.greyLight45, // no usage
+  archivedLight: palette.greyLight30,
+  archivedDark: palette.sonicSilver, // should replace archived as archived has no usage?
+  archivedBackground: palette.antiFlashWhite,
   black: palette.black,
-  inactiveBackground: palette.greyDark30,
-  shadow: palette.greyLight60,
+  inactiveBackground: palette.maasstrichtBlueLight50,
+  shadow: palette.greyLight45, // waiting for new color
 };
 
 type SystemPalette = typeof systemPalette;

package/types/components/Progress/StyledProgressCircle.d.ts

@@ -1,12 +1,18 @@
 import { View, ViewProps } from 'react-native';
 import { ThemeIntent } from './types';
-declare const HalfCircleWrapper: import("@emotion/native").StyledComponent<ViewProps & {
+declare const StyledContainer: import("@emotion/native").StyledComponent<ViewProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
-declare const HalfCircleInnerFG: import("@emotion/native").StyledComponent<ViewProps & {
+declare const StyledHalfCircleWrapper: import("@emotion/native").StyledComponent<ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+declare const StyledHalfCircleInnerFG: import("@emotion/native").StyledComponent<ViewProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 } & {
@@ -14,19 +20,19 @@ declare const HalfCircleInnerFG: import("@emotion/native").StyledComponent<ViewP
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
-declare const HalfCircleInnerBG: import("@emotion/native").StyledComponent<ViewProps & {
+declare const StyledHalfCircleInnerBG: import("@emotion/native").StyledComponent<ViewProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
-declare const DonutCircle: import("@emotion/native").StyledComponent<ViewProps & {
+declare const StyledDonutCircle: import("@emotion/native").StyledComponent<ViewProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
-declare const StrokeEnd: import("@emotion/native").StyledComponent<ViewProps & {
+declare const StyledStrokeEnd: import("@emotion/native").StyledComponent<ViewProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 } & {
@@ -34,4 +40,4 @@ declare const StrokeEnd: import("@emotion/native").StyledComponent<ViewProps & {
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
-export { DonutCircle, HalfCircleWrapper, HalfCircleInnerFG, HalfCircleInnerBG, StrokeEnd, };
+export { StyledContainer, StyledDonutCircle, StyledHalfCircleWrapper, StyledHalfCircleInnerFG, StyledHalfCircleInnerBG, StyledStrokeEnd, };

package/types/theme/components/progress.d.ts

@@ -10,8 +10,7 @@ declare const getProgressTheme: (theme: GlobalTheme) => {
         innerBackground: string;
     };
     sizes: {
-        radius: number;
-        strokeWidth: number;
+        circleWidth: number;
         barHeight: number;
     };
     radii: {