@hero-design/rn 7.22.2 → 7.22.3

package/src/theme/components/icon.ts

@@ -2,14 +2,15 @@ import type { GlobalTheme } from '../global';
 
 const getIconTheme = (theme: GlobalTheme) => {
   const colors = {
-    text: theme.colors.text,
+    text: theme.colors.globalPrimary,
     primary: theme.colors.primary,
+    secondary: theme.colors.secondary,
     info: theme.colors.info,
     danger: theme.colors.danger,
     success: theme.colors.success,
     warning: theme.colors.warning,
-    disabledText: theme.colors.disabledText,
-    invertedText: theme.colors.invertedText,
+    disabledText: theme.colors.mutedGlobalPrimary,
+    invertedText: theme.colors.defaultGlobalSurface,
   };
 
   const sizes = {

package/src/theme/components/list.ts

@@ -2,17 +2,16 @@ import type { GlobalTheme } from '../global';
 
 const getListTheme = (theme: GlobalTheme) => {
   const colors = {
-    checkedListItemContainerBackground:
-      theme.colors.__alpha__lightHighlightedSurface,
+    checkedListItemContainerBackground: theme.colors.highlightedSurface,
     highlightedListItemContainerBackground:
-      theme.colors.__alpha__lightHighlightedSurface,
-    listItemContainerBackground: theme.colors.platformBackground,
+      theme.colors.lightHighlightedSurface,
+    listItemContainerBackground: theme.colors.defaultGlobalSurface,
     leadingStatus: {
-      danger: theme.colors.dangerMediumLight,
-      info: theme.colors.infoLight,
+      danger: theme.colors.error,
+      info: theme.colors.info,
       success: theme.colors.success,
       warning: theme.colors.warning,
-      archived: theme.colors.archivedLight,
+      archived: theme.colors.archived,
     },
   };
 

package/src/theme/components/pinInput.ts

@@ -7,10 +7,10 @@ const getPinInputTheme = (theme: GlobalTheme) => {
   };
 
   const colors = {
-    default: theme.colors.text,
-    mask: theme.colors.subduedText,
-    error: theme.colors.danger,
-    disabled: theme.colors.archivedLight,
+    default: theme.colors.globalPrimary,
+    mask: theme.colors.mutedGlobalPrimary,
+    error: theme.colors.error,
+    disabled: theme.colors.mutedGlobalPrimary,
   };
 
   const fonts = {

package/src/theme/components/progress.ts

@@ -4,11 +4,11 @@ const getProgressTheme = (theme: GlobalTheme) => {
   const colors = {
     primary: theme.colors.primary,
     success: theme.colors.success, // should be emerald dark 15
-    warning: theme.colors.warningDark,
+    warning: theme.colors.warning,
     danger: theme.colors.danger,
     info: theme.colors.info,
-    background: theme.colors.outline,
-    innerBackground: theme.colors.platformBackground,
+    background: theme.colors.globalSecondaryOutline,
+    innerBackground: theme.colors.defaultGlobalSurface,
   };
 
   const sizes = {

package/src/theme/components/richTextEditor.ts

@@ -2,9 +2,9 @@ import type { GlobalTheme } from '../global';
 
 const getRichTextEditorTheme = (theme: GlobalTheme) => {
   const colors = {
-    toolbarBorderColor: theme.colors.outline,
-    toolbarBackgroundColor: theme.colors.backgroundLight,
-    toolbarButtonSelectedBackground: theme.colors.outline,
+    toolbarBorderColor: theme.colors.globalSecondaryOutline,
+    toolbarBackgroundColor: theme.colors.neutralGlobalSurface,
+    toolbarButtonSelectedBackground: theme.colors.lightHighlightedSurface,
   };
 
   const borderWidths = {

package/src/theme/components/sectionHeading.ts

@@ -2,7 +2,7 @@ import type { GlobalTheme } from '../global';
 
 const getSectionHeadingTheme = (theme: GlobalTheme) => {
   const colors = {
-    background: theme.colors.__alpha__globalNeutral3,
+    background: theme.colors.neutralGlobalSurface,
   };
 
   const space = {

package/src/theme/components/select.ts

@@ -2,7 +2,7 @@ import type { GlobalTheme } from '../global';
 
 const getSelectTheme = (theme: GlobalTheme) => {
   const colors = {
-    footerText: theme.colors.primary,
+    footerText: theme.colors.secondary,
   };
 
   const space = {

package/src/theme/components/slider.ts

@@ -2,9 +2,9 @@ import type { GlobalTheme } from '../global';
 
 const getSliderTheme = (theme: GlobalTheme) => {
   const colors = {
-    minimumTrackTint: theme.colors.__alpha__primary1,
-    thumbTint: theme.colors.__alpha__globalSecondary4,
-    maximumTrackTint: theme.colors.__alpha__secondary4,
+    minimumTrackTint: theme.colors.secondary,
+    thumbTint: theme.colors.neutralGlobalSurface,
+    maximumTrackTint: theme.colors.lightHighlightedSurface,
   };
 
   return { colors };

package/src/theme/components/spinner.ts

@@ -2,10 +2,7 @@ import type { GlobalTheme } from '../global';
 
 const getSpinnerTheme = (theme: GlobalTheme) => {
   const colors = {
-    dot1: theme.colors.__alpha__secondary1,
-    dot2: theme.colors.__alpha__secondary2,
-    dot3: theme.colors.__alpha__secondary3,
-    dot4: theme.colors.__alpha__secondary4,
+    dot: theme.colors.primary,
   };
 
   const space = {

package/src/theme/components/switch.ts

@@ -3,15 +3,15 @@ import type { GlobalTheme } from '../global';
 const getSwitchTheme = (theme: GlobalTheme) => {
   const colors = {
     backgroundColors: {
-      checked: theme.colors.primary,
-      unchecked: theme.colors.globalPrimaryLight,
-      'disabled-checked': theme.colors.primaryLight,
-      'disabled-unchecked': theme.colors.archived,
+      checked: theme.colors.secondary,
+      unchecked: theme.colors.mutedSecondary,
+      'disabled-checked': theme.colors.disabledSecondary,
+      'disabled-unchecked': theme.colors.disabledOnDefaultGlobalSurface,
     },
-    thumb: theme.colors.platformBackground,
+    thumb: theme.colors.onSecondary,
     selector: {
-      background: theme.colors.__alpha__globalNeutral3,
-      textBackground: theme.colors.__alpha__primary1,
+      background: theme.colors.neutralGlobalSurface,
+      textBackground: theme.colors.secondary,
     },
   };
 

package/src/theme/components/tabs.ts

@@ -2,11 +2,11 @@ import type { GlobalTheme } from '../global';
 
 const getTabsTheme = (theme: GlobalTheme) => {
   const colors = {
-    active: theme.colors.text,
-    inactive: theme.colors.text,
-    activeBackground: theme.colors.__alpha__secondary4,
-    headerBottom: theme.colors.outline,
-    text: theme.colors.text,
+    active: theme.colors.globalPrimary,
+    inactive: theme.colors.globalPrimary,
+    activeBackground: theme.colors.mutedPrimary,
+    headerBottom: theme.colors.globalSecondaryOutline,
+    text: theme.colors.globalPrimary,
   };
 
   const space = {

package/src/theme/components/tag.ts

@@ -6,20 +6,20 @@ const getTagTheme = (theme: GlobalTheme) => {
   };
 
   const colors = {
-    default: theme.colors.__alpha__globalPrimary,
+    default: theme.colors.globalPrimary,
     defaultBackground: undefined,
-    primary: theme.colors.__alpha__globalPrimary,
+    primary: theme.colors.globalPrimary,
     primaryBackground: undefined,
-    info: theme.colors.__alpha__globalLabel4,
-    infoBackground: theme.colors.__alpha__globalLabel9,
-    success: theme.colors.__alpha__globalLabel3,
-    successBackground: theme.colors.__alpha__globalLabel8,
-    warning: theme.colors.__alpha__globalLabel2,
-    warningBackground: theme.colors.__alpha__globalLabel7,
-    danger: theme.colors.__alpha__globalLabel1,
-    dangerBackground: theme.colors.__alpha__globalLabel6,
-    archived: theme.colors.__alpha__globalLabel5,
-    archivedBackground: theme.colors.__alpha__globalNeutral3,
+    info: theme.colors.onInfoSurface,
+    infoBackground: theme.colors.infoSurface,
+    success: theme.colors.onSuccessSurface,
+    successBackground: theme.colors.successSurface,
+    warning: theme.colors.onWarningSurface,
+    warningBackground: theme.colors.warningSurface,
+    danger: theme.colors.onErrorSurface,
+    dangerBackground: theme.colors.errorSurface,
+    archived: theme.colors.onArchivedSurface,
+    archivedBackground: theme.colors.archivedSurface,
   };
 
   const fonts = {

package/src/theme/components/textInput.ts

@@ -2,53 +2,53 @@ import type { GlobalTheme } from '../global';
 
 const getTextInputTheme = (theme: GlobalTheme) => {
   const colors = {
-    labelBackground: theme.colors.platformBackground,
+    labelBackground: theme.colors.defaultGlobalSurface,
     asterisks: {
-      default: theme.colors.danger,
-      error: theme.colors.danger,
-      disabled: theme.colors.disabledLightText,
-      readonly: theme.colors.disabledText,
-      filled: theme.colors.danger,
-      focused: theme.colors.danger,
+      default: theme.colors.error,
+      error: theme.colors.error,
+      disabled: theme.colors.disabledOnDefaultGlobalSurface,
+      readonly: theme.colors.mutedSecondary,
+      filled: theme.colors.error,
+      focused: theme.colors.error,
     },
-    error: theme.colors.danger,
-    placeholderIfNotFocused: theme.colors.text,
-    placeholderIfFocued: theme.colors.disabledText,
-    label: theme.colors.text,
-    readonlyLabel: theme.colors.disabledText,
-    disabledLabel: theme.colors.disabledLightText,
-    text: theme.colors.text,
+    error: theme.colors.error,
+    placeholderIfNotFocused: theme.colors.globalPrimary,
+    placeholderIfFocued: theme.colors.mutedSecondary,
+    label: theme.colors.globalPrimary,
+    readonlyLabel: theme.colors.mutedSecondary,
+    disabledLabel: theme.colors.disabledOnDefaultGlobalSurface,
+    text: theme.colors.globalPrimary,
     borders: {
-      default: theme.colors.text,
-      error: theme.colors.danger,
-      disabled: theme.colors.disabledLightText,
-      readonly: theme.colors.disabledText,
-      filled: theme.colors.text,
-      focused: theme.colors.text,
+      default: theme.colors.globalPrimary,
+      error: theme.colors.error,
+      disabled: theme.colors.disabledOnDefaultGlobalSurface,
+      readonly: theme.colors.mutedSecondary,
+      filled: theme.colors.globalPrimary,
+      focused: theme.colors.globalPrimary,
     },
     labels: {
-      default: theme.colors.text,
-      error: theme.colors.text,
-      disabled: theme.colors.disabledLightText,
-      readonly: theme.colors.disabledText,
-      filled: theme.colors.text,
-      focused: theme.colors.text,
+      default: theme.colors.globalPrimary,
+      error: theme.colors.globalPrimary,
+      disabled: theme.colors.disabledOnDefaultGlobalSurface,
+      readonly: theme.colors.disabledOnDefaultGlobalSurface,
+      filled: theme.colors.globalPrimary,
+      focused: theme.colors.globalPrimary,
     },
     labelsInsideTextInput: {
-      default: theme.colors.text,
-      error: theme.colors.text,
-      disabled: theme.colors.disabledLightText,
-      readonly: theme.colors.disabledText,
-      filled: theme.colors.text,
-      focused: theme.colors.text,
+      default: theme.colors.globalPrimary,
+      error: theme.colors.globalPrimary,
+      disabled: theme.colors.disabledOnDefaultGlobalSurface,
+      readonly: theme.colors.disabledOnDefaultGlobalSurface,
+      filled: theme.colors.globalPrimary,
+      focused: theme.colors.globalPrimary,
     },
     maxLengthLabels: {
-      default: theme.colors.text,
-      error: theme.colors.danger,
-      disabled: theme.colors.disabledLightText,
-      readonly: theme.colors.disabledText,
-      filled: theme.colors.text,
-      focused: theme.colors.text,
+      default: theme.colors.globalPrimary,
+      error: theme.colors.error,
+      disabled: theme.colors.disabledOnDefaultGlobalSurface,
+      readonly: theme.colors.disabledOnDefaultGlobalSurface,
+      filled: theme.colors.globalPrimary,
+      focused: theme.colors.globalPrimary,
     },
   };
 

package/src/theme/components/toast.ts

@@ -4,12 +4,12 @@ const getToastTheme = (theme: GlobalTheme) => {
   const colors = {
     success: theme.colors.success,
     warning: theme.colors.warning,
-    error: theme.colors.dangerLight,
-    info: theme.colors.infoLight,
-    notification: theme.colors.platformBackground,
-    snackbar: theme.colors.backgroundDark,
-    divider: theme.colors.outline,
-    shadow: theme.colors.backgroundDark,
+    error: theme.colors.error,
+    info: theme.colors.info,
+    notification: theme.colors.defaultGlobalSurface,
+    snackbar: theme.colors.globalPrimary,
+    divider: theme.colors.globalSecondaryOutline,
+    shadow: theme.colors.globalPrimary,
   };
 
   const sizes = {

package/src/theme/components/toolbar.ts

@@ -2,9 +2,10 @@ import type { GlobalTheme } from '../global';
 
 const getToolbarTheme = (theme: GlobalTheme) => {
   const colors = {
-    background: theme.colors.platformBackground,
-    border: theme.colors.outline,
+    background: theme.colors.defaultGlobalSurface,
+    border: theme.colors.globalSecondaryOutline,
     primary: theme.colors.primary,
+    secondary: theme.colors.secondary,
     info: theme.colors.info,
     success: theme.colors.success,
     danger: theme.colors.warning,

package/src/theme/components/typography.ts

@@ -2,14 +2,15 @@ import type { GlobalTheme } from '../global';
 
 const getTypographyTheme = (theme: GlobalTheme) => {
   const colors = {
-    body: theme.colors.text,
-    subdued: theme.colors.disabledText,
+    body: theme.colors.globalPrimary,
+    subdued: theme.colors.mutedGlobalPrimary,
     primary: theme.colors.primary,
+    secondary: theme.colors.secondary,
     info: theme.colors.info,
     danger: theme.colors.danger,
     warning: theme.colors.warning,
     success: theme.colors.success,
-    inverted: theme.colors.invertedText,
+    inverted: theme.colors.onGlobalPrimary,
   };
 
   const fonts = {

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

@@ -0,0 +1,32 @@
+import { defaultMobilePalette as palette } from '@hero-design/colors';
+import type { GlobalSystemPalette } from './types';
+
+const globalPalette: GlobalSystemPalette = {
+  globalPrimary: palette.maasstrichtBlue,
+  mutedGlobalPrimary: palette.maasstrichtBlueLight30,
+  onGlobalPrimary: palette.white,
+  globalSecondary: palette.maasstrichtBlueLight30,
+  globalPrimaryOutline: palette.maasstrichtBlue,
+  globalSecondaryOutline: palette.greyLight75,
+  defaultGlobalSurface: palette.white,
+  onDefaultGlobalSurface: palette.maasstrichtBlue,
+  neutralGlobalSurface: palette.greyLight90,
+  disabledOnDefaultGlobalSurface: palette.greyLight30,
+  error: palette.pastelRed,
+  errorSurface: palette.linen,
+  onErrorSurface: palette.vermilion,
+  warning: palette.mellowApricot,
+  warningSurface: palette.seashell,
+  onWarningSurface: palette.deepSaffron,
+  success: palette.emerald,
+  successSurface: palette.honeydew,
+  onSuccessSurface: palette.pineGreen,
+  info: palette.vodka,
+  infoSurface: palette.aliceBlue,
+  onInfoSurface: palette.ultramarineBlue,
+  archived: palette.greyLight45,
+  archivedSurface: palette.antiFlashWhite,
+  onArchivedSurface: palette.sonicSilver,
+};
+
+export default globalPalette;

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

@@ -0,0 +1,53 @@
+import {
+  defaultMobilePalette as palette,
+  swagPalette,
+} from '@hero-design/colors';
+import type { LegacySystemPalette } from './types';
+
+const legacySystemPalette: LegacySystemPalette = {
+  globalPrimary: palette.maasstrichtBlue,
+  globalPrimaryLight: palette.maasstrichtBlueLight50,
+  globalPrimaryBackground: palette.maasstrichtBlueLight90,
+  primary: swagPalette.violet,
+  primaryLight: swagPalette.violetLight50,
+  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.greyLight90,
+  backgroundDark: palette.maasstrichtBlue,
+  text: palette.maasstrichtBlue,
+  subduedText: palette.maasstrichtBlueLight30, // secondary
+  disabledText: palette.maasstrichtBlueLight50, // readonly
+  disabledLightText: palette.greyLight30, // disabled
+  invertedText: palette.white,
+  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.greyLight90,
+  black: palette.black,
+  inactiveBackground: palette.maasstrichtBlueLight50,
+  shadow: palette.greyLight45, // waiting for new color
+};
+
+export default legacySystemPalette;

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

@@ -1,21 +1,18 @@
-import {
-  defaultMobilePalette as palette,
-  swagPalette,
-} from '@hero-design/colors';
+import { swagPalette as palette } from '@hero-design/colors';
 import type { SystemPalette } from './types';
+import globalPalette from './global';
 
 const swagSystemPalette: SystemPalette = {
+  // Legacy
   globalPrimary: palette.maasstrichtBlue,
   globalPrimaryLight: palette.maasstrichtBlueLight50,
   globalPrimaryBackground: palette.maasstrichtBlueLight90,
-  primary: swagPalette.violet,
-  primaryLight: swagPalette.violetLight50,
-  primaryDark: swagPalette.scarletGumLight30, // DEPRECATED
-  primaryBackground: swagPalette.violetLight90,
+  primaryLight: palette.violetLight50,
+  primaryDark: palette.scarletGumLight30, // DEPRECATED
+  primaryBackground: palette.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
+  secondaryLight: palette.vodka, // no longer needed after revising Button
+  secondaryBackground: palette.aliceBlue, // no longer needed after revising Button
   info: palette.ultramarineBlue,
   infoMediumLight: palette.vodka, // DEPRECATED, use infoLight instead
   infoLight: palette.vodka,
@@ -49,31 +46,20 @@ const swagSystemPalette: SystemPalette = {
   inactiveBackground: palette.maasstrichtBlueLight50,
   shadow: palette.greyLight45, // waiting for new color
 
-  __alpha__globalPrimary: palette.maasstrichtBlue,
+  // Global
+  ...globalPalette,
 
-  __alpha__globalSecondary1: palette.maasstrichtBlueLight30,
-  __alpha__globalSecondary4: palette.maasstrichtBlueLight90,
-
-  __alpha__globalNeutral3: palette.greyLight90,
-
-  __alpha__globalLabel1: palette.vermilion,
-  __alpha__globalLabel2: palette.deepSaffron,
-  __alpha__globalLabel3: palette.pineGreen,
-  __alpha__globalLabel4: palette.ultramarineBlue,
-  __alpha__globalLabel5: palette.sonicSilver,
-  __alpha__globalLabel6: palette.linen,
-  __alpha__globalLabel7: palette.seashell,
-  __alpha__globalLabel8: palette.honeydew,
-  __alpha__globalLabel9: palette.aliceBlue,
-
-  __alpha__primary1: swagPalette.scarletGum,
-  __alpha__primary2: swagPalette.mauve,
-
-  __alpha__secondary1: swagPalette.scarletGumLight30,
-  __alpha__secondary2: swagPalette.scarletGumLight50,
-  __alpha__secondary3: swagPalette.scarletGumLight80,
-  __alpha__secondary4: swagPalette.scarletGumLight90,
-  __alpha__lightHighlightedSurface: '#ECE8EF',
+  // Brand
+  primary: palette.maasstrichtBlue,
+  mutedPrimary: palette.maasstrichtBlueLight90,
+  onPrimary: palette.white,
+  secondary: palette.scarletGum,
+  onSecondary: palette.white,
+  mutedSecondary: palette.maasstrichtBlueLight50,
+  disabledSecondary: palette.scarletGumLight50,
+  highlightedSurface: palette.scarletGumLight80,
+  highlightedSecondarySurface: palette.aliceBlue,
+  lightHighlightedSurface: palette.scarletGumLight90,
 };
 
 export default swagSystemPalette;

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

@@ -1,4 +1,45 @@
-export type SystemPalette = {
+export type GlobalSystemPalette = {
+  globalPrimary: string;
+  mutedGlobalPrimary: string;
+  onGlobalPrimary: string;
+  globalSecondary: string;
+  globalPrimaryOutline: string;
+  globalSecondaryOutline: string;
+  defaultGlobalSurface: string;
+  onDefaultGlobalSurface: string;
+  neutralGlobalSurface: string;
+  disabledOnDefaultGlobalSurface: string;
+  error: string;
+  errorSurface: string;
+  onErrorSurface: string;
+  warning: string;
+  warningSurface: string;
+  onWarningSurface: string;
+  success: string;
+  successSurface: string;
+  onSuccessSurface: string;
+  info: string;
+  infoSurface: string;
+  onInfoSurface: string;
+  archived: string;
+  archivedSurface: string;
+  onArchivedSurface: string;
+};
+
+export type BrandSystemPalette = {
+  primary: string;
+  mutedPrimary: string;
+  onPrimary: string;
+  secondary: string;
+  highlightedSecondarySurface: string; // TODO: Ask Ariel to add this
+  onSecondary: string;
+  mutedSecondary: string;
+  disabledSecondary: string;
+  highlightedSurface: string;
+  lightHighlightedSurface: string;
+};
+
+export type LegacySystemPalette = {
   globalPrimary: string;
   globalPrimaryLight: string;
   globalPrimaryBackground: string;
@@ -42,30 +83,8 @@ export type SystemPalette = {
   black: string;
   inactiveBackground: string;
   shadow: string;
-
-  __alpha__globalPrimary: string;
-
-  __alpha__globalSecondary1: string;
-  __alpha__globalSecondary4: string;
-
-  __alpha__globalNeutral3: string;
-
-  __alpha__globalLabel1: string;
-  __alpha__globalLabel2: string;
-  __alpha__globalLabel3: string;
-  __alpha__globalLabel4: string;
-  __alpha__globalLabel5: string;
-  __alpha__globalLabel6: string;
-  __alpha__globalLabel7: string;
-  __alpha__globalLabel8: string;
-  __alpha__globalLabel9: string;
-
-  __alpha__primary1: string;
-  __alpha__primary2: string;
-
-  __alpha__secondary1: string;
-  __alpha__secondary2: string;
-  __alpha__secondary3: string;
-  __alpha__secondary4: string;
-  __alpha__lightHighlightedSurface: string;
 };
+
+export type SystemPalette = LegacySystemPalette &
+  GlobalSystemPalette &
+  BrandSystemPalette;

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

@@ -1,18 +1,19 @@
-import { workPalette } from '@hero-design/colors';
+import { workPalette as palette } from '@hero-design/colors';
 import swag from './swag';
 import type { SystemPalette } from './types';
 
 const workSystemPalette: SystemPalette = {
   ...swag,
-  primary: workPalette.gold,
-  primaryLight: workPalette.goldLight50,
-  primaryDark: workPalette.goldLight20,
-  primaryBackground: workPalette.goldLight90,
 
-  __alpha__secondary1: workPalette.goldLight20,
-  __alpha__secondary2: workPalette.goldLight50,
-  __alpha__secondary3: workPalette.goldLight70,
-  __alpha__secondary4: workPalette.goldLight90,
+  primary: palette.gold,
+  mutedPrimary: palette.goldLight90,
+  onPrimary: palette.maasstrichtBlue,
+  secondary: palette.violet,
+  onSecondary: palette.white,
+  mutedSecondary: palette.maasstrichtBlueLight50,
+  disabledSecondary: palette.violetLight50,
+  highlightedSurface: palette.violetLight80,
+  lightHighlightedSurface: palette.violetLight90,
 };
 
 export default workSystemPalette;

package/types/components/Icon/HeroIcon/index.d.ts

@@ -1,5 +1,5 @@
 declare type ThemeSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
-declare type ThemeIntent = 'text' | 'primary' | 'info' | 'danger' | 'success' | 'warning' | 'disabled-text' | 'text-inverted';
+declare type ThemeIntent = 'text' | 'primary' | 'secondary' | 'info' | 'danger' | 'success' | 'warning' | 'disabled-text' | 'text-inverted';
 declare const StyledHeroIcon: import("@emotion/native").StyledComponent<import("react-native-vector-icons/Icon").IconProps & {
     theme?: import("@emotion/react").Theme;
     as?: import("react").ElementType<any>;

package/types/components/Icon/index.d.ts

@@ -9,7 +9,7 @@ export interface IconProps {
     /**
      * Intent of the Icon.
      */
-    intent?: 'text' | 'primary' | 'info' | 'danger' | 'success' | 'warning' | 'disabled-text' | 'text-inverted';
+    intent?: 'text' | 'primary' | 'secondary' | 'info' | 'danger' | 'success' | 'warning' | 'disabled-text' | 'text-inverted';
     /**
      * Size of the Icon.
      */

package/types/components/Toast/__tests__/index.spec.d.ts

@@ -0,0 +1 @@
+export {};