@hero-design/rn 7.27.0 → 7.27.1

package/src/components/Avatar/AvatarStack/utils.ts

@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { useTheme } from '../../../theme';
+import { mobileVisualisationPalette } from '@hero-design/colors';
 
 const shuffleArray = <T>(array: Array<T>): Array<T> =>
   array
@@ -11,12 +11,9 @@ const shuffleArray = <T>(array: Array<T>): Array<T> =>
  * Hook that returns a memoized and shuffled array of visualisation colors for Avatar.
  */
 export const useAvatarColors = () => {
-  const theme = useTheme();
-  const visualisationColors = theme.__hd__.avatar.colors.visualisation;
   const shuffledColors = useMemo(
-    () => shuffleArray(visualisationColors),
-    [visualisationColors]
+    () => shuffleArray(Object.values(mobileVisualisationPalette)),
+    []
   );
-
   return shuffledColors;
 };

package/src/theme/__tests__/__snapshots__/index.spec.ts.snap

@@ -65,28 +65,6 @@ Object {
         "primary": "#401960",
         "success": "#5ace7d",
         "text": "#ffffff",
-        "visualisation": Array [
-          "#48000a",
-          "#737479",
-          "#001f23",
-          "#353957",
-          "#25006e",
-          "#4568fb",
-          "#5a68e2",
-          "#4853b5",
-          "#48a564",
-          "#017d6d",
-          "#cc822a",
-          "#998000",
-          "#e3602a",
-          "#f46363",
-          "#de350b",
-          "#c38cee",
-          "#9f64e3",
-          "#8505a2",
-          "#7622d7",
-          "#401960",
-        ],
         "warning": "#ffbe71",
       },
       "fontSizes": Object {

package/src/theme/components/avatar.ts

@@ -1,4 +1,3 @@
-import { defaultMobilePalette as palette } from '@hero-design/colors';
 import type { GlobalTheme } from '../global';
 
 const getAvatarTheme = (theme: GlobalTheme) => {
@@ -9,28 +8,6 @@ const getAvatarTheme = (theme: GlobalTheme) => {
     success: theme.colors.success,
     warning: theme.colors.warning,
     text: theme.colors.invertedText,
-    visualisation: [
-      palette.currant,
-      palette.sonicSilver,
-      palette.maasstrichtBlue,
-      palette.nightBlue,
-      palette.darkBlue,
-      palette.ultramarineBlue,
-      palette.royalBlue,
-      palette.royalBlueDark20,
-      palette.emeraldDark20,
-      palette.pineGreen,
-      palette.deepSaffronDark20,
-      palette.goldDark40,
-      palette.apple,
-      palette.pastelRed,
-      palette.vermilion,
-      palette.mauve,
-      palette.violetLight30,
-      palette.violet1,
-      palette.violet,
-      palette.scarletGum,
-    ],
   };
 
   const sizes = {

package/src/theme/global/colors/work.ts

@@ -3,13 +3,13 @@ import swag from './swag';
 import type { SystemPalette, BrandSystemPalette } from './types';
 
 const workBrandSystemPallete: BrandSystemPalette = {
-  primary: palette.violet,
+  primary: palette.policeBlue,
   onPrimary: palette.white,
-  secondary: palette.violetLight30,
+  secondary: palette.policeBlueLight25,
   onSecondary: palette.white,
   defaultSurface: palette.white,
-  highlightedSurface: palette.violetLight90,
-  pressedSurface: palette.violetLight20,
+  highlightedSurface: palette.policeBlueLight90,
+  pressedSurface: palette.policeBlueLight20,
 
   decorativePrimary: palette.gold,
   decorativePrimarySurface: palette.goldLight80,

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

@@ -7,7 +7,6 @@ declare const getAvatarTheme: (theme: GlobalTheme) => {
         success: string;
         warning: string;
         text: string;
-        visualisation: string[];
     };
     sizes: {
         small: number;