@hero-design/rn 7.23.0 → 7.25.0

package/src/theme/components/icon.ts

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

package/src/theme/components/list.ts

@@ -3,8 +3,6 @@ import type { GlobalTheme } from '../global';
 const getListTheme = (theme: GlobalTheme) => {
   const colors = {
     checkedListItemContainerBackground: theme.colors.highlightedSurface,
-    highlightedListItemContainerBackground:
-      theme.colors.lightHighlightedSurface,
     listItemContainerBackground: theme.colors.defaultGlobalSurface,
     leadingStatus: {
       danger: theme.colors.error,

package/src/theme/components/pinInput.ts

@@ -7,10 +7,10 @@ const getPinInputTheme = (theme: GlobalTheme) => {
   };
 
   const colors = {
-    default: theme.colors.globalPrimary,
-    mask: theme.colors.mutedGlobalPrimary,
-    error: theme.colors.error,
-    disabled: theme.colors.mutedGlobalPrimary,
+    default: theme.colors.primaryOutline,
+    mask: theme.colors.primaryOutline,
+    error: theme.colors.onErrorSurface,
+    disabled: theme.colors.disabledOnDefaultGlobalSurface,
   };
 
   const fonts = {

package/src/theme/components/progress.ts

@@ -3,11 +3,12 @@ import type { GlobalTheme } from '../global';
 const getProgressTheme = (theme: GlobalTheme) => {
   const colors = {
     primary: theme.colors.primary,
-    success: theme.colors.success, // should be emerald dark 15
-    warning: theme.colors.warning,
-    danger: theme.colors.danger,
-    info: theme.colors.info,
-    background: theme.colors.globalSecondaryOutline,
+    success: theme.colors.onSuccessSurface, // should be emerald dark 15
+    warning: theme.colors.onWarningSurface,
+    danger: theme.colors.onErrorSurface,
+    info: theme.colors.onInfoSurface,
+    archived: theme.colors.onArchivedSurface,
+    background: theme.colors.secondaryOutline,
     innerBackground: theme.colors.defaultGlobalSurface,
   };
 

package/src/theme/components/radio.ts

@@ -2,7 +2,7 @@ import type { GlobalTheme } from '../global';
 
 const getRadioTheme = (theme: GlobalTheme) => {
   const colors = {
-    circle: theme.colors.globalPrimary,
+    circle: theme.colors.onDefaultGlobalSurface,
   };
 
   const space = {

package/src/theme/components/richTextEditor.ts

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

package/src/theme/components/slider.ts

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

package/src/theme/components/spinner.ts

@@ -2,7 +2,10 @@ import type { GlobalTheme } from '../global';
 
 const getSpinnerTheme = (theme: GlobalTheme) => {
   const colors = {
-    dot: theme.colors.primary,
+    dot: {
+      primary: theme.colors.primary,
+      inverted: theme.colors.onPrimary,
+    },
   };
 
   const space = {

package/src/theme/components/swipeable.ts

@@ -0,0 +1,13 @@
+import type { GlobalTheme } from '../global';
+
+const getSwipeableTheme = (theme: GlobalTheme) => {
+  const colors = {
+    success: theme.colors.success,
+    danger: theme.colors.error,
+    primary: theme.colors.primary,
+  };
+
+  return { colors };
+};
+
+export default getSwipeableTheme;

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.secondary,
-      unchecked: theme.colors.mutedSecondary,
-      'disabled-checked': theme.colors.disabledSecondary,
+      checked: theme.colors.primary,
+      unchecked: theme.colors.inactiveOnDefaultGlobalSurface,
+      'disabled-checked': theme.colors.highlightedSurface,
       'disabled-unchecked': theme.colors.disabledOnDefaultGlobalSurface,
     },
     thumb: theme.colors.onSecondary,
     selector: {
       background: theme.colors.neutralGlobalSurface,
-      textBackground: theme.colors.secondary,
+      textBackground: theme.colors.decorativePrimary,
     },
   };
 

package/src/theme/components/tabs.ts

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

package/src/theme/components/tag.ts

@@ -6,9 +6,9 @@ const getTagTheme = (theme: GlobalTheme) => {
   };
 
   const colors = {
-    default: theme.colors.globalPrimary,
+    default: theme.colors.onDefaultGlobalSurface,
     defaultBackground: undefined,
-    primary: theme.colors.globalPrimary,
+    primary: theme.colors.primary,
     primaryBackground: undefined,
     info: theme.colors.onInfoSurface,
     infoBackground: theme.colors.infoSurface,

package/src/theme/components/textInput.ts

@@ -4,51 +4,41 @@ const getTextInputTheme = (theme: GlobalTheme) => {
   const colors = {
     labelBackground: theme.colors.defaultGlobalSurface,
     asterisks: {
-      default: theme.colors.error,
-      error: theme.colors.error,
+      default: theme.colors.onErrorSurface,
+      error: theme.colors.onErrorSurface,
       disabled: theme.colors.disabledOnDefaultGlobalSurface,
-      readonly: theme.colors.mutedSecondary,
-      filled: theme.colors.error,
-      focused: theme.colors.error,
+      readonly: theme.colors.inactiveOnDefaultGlobalSurface,
+      filled: theme.colors.onErrorSurface,
     },
-    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,
+    error: theme.colors.onErrorSurface,
+    text: theme.colors.onDefaultGlobalSurface,
     borders: {
-      default: theme.colors.globalPrimary,
-      error: theme.colors.error,
-      disabled: theme.colors.disabledOnDefaultGlobalSurface,
-      readonly: theme.colors.mutedSecondary,
-      filled: theme.colors.globalPrimary,
-      focused: theme.colors.globalPrimary,
+      default: theme.colors.primaryOutline,
+      error: theme.colors.onErrorSurface,
+      disabled: theme.colors.disabledOutline,
+      readonly: theme.colors.inactiveOutline,
+      filled: theme.colors.primaryOutline,
     },
     labels: {
-      default: theme.colors.globalPrimary,
-      error: theme.colors.globalPrimary,
+      default: theme.colors.onDefaultGlobalSurface,
+      error: theme.colors.onDefaultGlobalSurface,
       disabled: theme.colors.disabledOnDefaultGlobalSurface,
-      readonly: theme.colors.disabledOnDefaultGlobalSurface,
-      filled: theme.colors.globalPrimary,
-      focused: theme.colors.globalPrimary,
+      readonly: theme.colors.inactiveOnDefaultGlobalSurface,
+      filled: theme.colors.onDefaultGlobalSurface,
     },
     labelsInsideTextInput: {
-      default: theme.colors.globalPrimary,
-      error: theme.colors.globalPrimary,
+      default: theme.colors.onDefaultGlobalSurface,
+      error: theme.colors.onDefaultGlobalSurface,
       disabled: theme.colors.disabledOnDefaultGlobalSurface,
-      readonly: theme.colors.disabledOnDefaultGlobalSurface,
-      filled: theme.colors.globalPrimary,
-      focused: theme.colors.globalPrimary,
+      readonly: theme.colors.inactiveOnDefaultGlobalSurface,
+      filled: theme.colors.onDefaultGlobalSurface,
     },
     maxLengthLabels: {
-      default: theme.colors.globalPrimary,
-      error: theme.colors.error,
+      default: theme.colors.onDefaultGlobalSurface,
+      error: theme.colors.onErrorSurface,
       disabled: theme.colors.disabledOnDefaultGlobalSurface,
-      readonly: theme.colors.disabledOnDefaultGlobalSurface,
-      filled: theme.colors.globalPrimary,
-      focused: theme.colors.globalPrimary,
+      readonly: theme.colors.inactiveOnDefaultGlobalSurface,
+      filled: theme.colors.onDefaultGlobalSurface,
     },
   };
 

package/src/theme/components/toast.ts

@@ -7,9 +7,9 @@ const getToastTheme = (theme: GlobalTheme) => {
     error: theme.colors.error,
     info: theme.colors.info,
     notification: theme.colors.defaultGlobalSurface,
-    snackbar: theme.colors.globalPrimary,
-    divider: theme.colors.globalSecondaryOutline,
-    shadow: theme.colors.globalPrimary,
+    snackbar: theme.colors.darkGlobalSurface,
+    divider: theme.colors.secondaryOutline,
+    shadow: theme.colors.primaryOutline,
   };
 
   const sizes = {

package/src/theme/components/toolbar.ts

@@ -3,14 +3,14 @@ import type { GlobalTheme } from '../global';
 const getToolbarTheme = (theme: GlobalTheme) => {
   const colors = {
     background: theme.colors.defaultGlobalSurface,
-    border: theme.colors.globalSecondaryOutline,
+    border: theme.colors.primaryOutline,
     primary: theme.colors.primary,
     secondary: theme.colors.secondary,
     info: theme.colors.info,
     success: theme.colors.success,
     danger: theme.colors.warning,
-    error: theme.colors.danger,
-    disabled: theme.colors.disabledText,
+    error: theme.colors.error,
+    disabled: theme.colors.disabledOnDefaultGlobalSurface,
   };
 
   const space = {

package/src/theme/components/typography.ts

@@ -2,15 +2,15 @@ import type { GlobalTheme } from '../global';
 
 const getTypographyTheme = (theme: GlobalTheme) => {
   const colors = {
-    body: theme.colors.globalPrimary,
-    subdued: theme.colors.mutedGlobalPrimary,
+    body: theme.colors.onDefaultGlobalSurface,
+    subdued: theme.colors.mutedOnDefaultGlobalSurface,
     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.onGlobalPrimary,
+    info: theme.colors.onInfoSurface,
+    danger: theme.colors.onErrorSurface,
+    warning: theme.colors.onWarningSurface,
+    success: theme.colors.onSuccessSurface,
+    inverted: theme.colors.onDarkGlobalSurface,
   };
 
   const fonts = {

package/src/theme/getTheme.ts

@@ -2,6 +2,7 @@ import { getGlobalTheme, defaultScale, swagSystemPalette } from './global';
 
 import getAccordionTheme from './components/accordion';
 import getAlertTheme from './components/alert';
+import getAttachmentTheme from './components/attachment';
 import getAvatarTheme from './components/avatar';
 import getBadgeTheme from './components/badge';
 import getBottomNavigationTheme from './components/bottomNavigation';
@@ -28,6 +29,7 @@ import getSectionHeadingTheme from './components/sectionHeading';
 import getSelectTheme from './components/select';
 import getSliderTheme from './components/slider';
 import getSpinnerTheme from './components/spinner';
+import getSwipeableTheme from './components/swipeable';
 import getSwitchTheme from './components/switch';
 import getTabsTheme from './components/tabs';
 import getTagTheme from './components/tag';
@@ -43,6 +45,7 @@ type Theme = GlobalTheme & {
   __hd__: {
     accordion: ReturnType<typeof getAccordionTheme>;
     alert: ReturnType<typeof getAlertTheme>;
+    attachment: ReturnType<typeof getAttachmentTheme>;
     avatar: ReturnType<typeof getAvatarTheme>;
     badge: ReturnType<typeof getBadgeTheme>;
     bottomNavigation: ReturnType<typeof getBottomNavigationTheme>;
@@ -69,6 +72,7 @@ type Theme = GlobalTheme & {
     select: ReturnType<typeof getSelectTheme>;
     slider: ReturnType<typeof getSliderTheme>;
     spinner: ReturnType<typeof getSpinnerTheme>;
+    swipeable: ReturnType<typeof getSwipeableTheme>;
     switch: ReturnType<typeof getSwitchTheme>;
     tabs: ReturnType<typeof getTabsTheme>;
     tag: ReturnType<typeof getTagTheme>;
@@ -89,8 +93,9 @@ const getTheme = (
     ...globalTheme,
     __hd__: {
       accordion: getAccordionTheme(globalTheme),
-      avatar: getAvatarTheme(globalTheme),
       alert: getAlertTheme(globalTheme),
+      attachment: getAttachmentTheme(globalTheme),
+      avatar: getAvatarTheme(globalTheme),
       badge: getBadgeTheme(globalTheme),
       bottomNavigation: getBottomNavigationTheme(globalTheme),
       bottomSheet: getBottomSheetTheme(globalTheme),
@@ -116,6 +121,7 @@ const getTheme = (
       select: getSelectTheme(globalTheme),
       slider: getSliderTheme(globalTheme),
       spinner: getSpinnerTheme(globalTheme),
+      swipeable: getSwipeableTheme(globalTheme),
       switch: getSwitchTheme(globalTheme),
       tabs: getTabsTheme(globalTheme),
       tag: getTagTheme(globalTheme),

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

@@ -0,0 +1,23 @@
+import { eBensPalette as palette } from '@hero-design/colors';
+import swag from './swag';
+import type { SystemPalette, BrandSystemPalette } from './types';
+
+const eBensBrandSystemPallete: BrandSystemPalette = {
+  primary: palette.violet,
+  onPrimary: palette.white,
+  secondary: palette.violetLight30,
+  onSecondary: palette.white,
+  defaultSurface: palette.greyLight90,
+  highlightedSurface: palette.violetLight90,
+  pressedSurface: palette.violetLight20,
+
+  decorativePrimary: palette.mauve,
+  decorativePrimarySurface: palette.mauveLight80,
+};
+
+const eBensSystemPalette: SystemPalette = {
+  ...swag,
+  ...eBensBrandSystemPallete,
+};
+
+export default eBensSystemPalette;

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

@@ -2,16 +2,24 @@ 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,
+  // Updated 14 / Nov / 22
+  // Surfaces
   defaultGlobalSurface: palette.white,
   onDefaultGlobalSurface: palette.maasstrichtBlue,
   neutralGlobalSurface: palette.greyLight90,
+  mutedOnDefaultGlobalSurface: palette.maasstrichtBlueLight30,
+  inactiveOnDefaultGlobalSurface: palette.maasstrichtBlueLight50,
   disabledOnDefaultGlobalSurface: palette.greyLight30,
+  darkGlobalSurface: palette.maasstrichtBlue,
+  onDarkGlobalSurface: palette.white,
+
+  // Outlines
+  primaryOutline: palette.maasstrichtBlue,
+  secondaryOutline: palette.greyLight75,
+  inactiveOutline: palette.maasstrichtBlueLight50,
+  disabledOutline: palette.greyLight30,
+
+  // Accents
   error: palette.pastelRed,
   errorSurface: palette.linen,
   onErrorSurface: palette.vermilion,
@@ -27,6 +35,7 @@ const globalPalette: GlobalSystemPalette = {
   archived: palette.greyLight45,
   archivedSurface: palette.antiFlashWhite,
   onArchivedSurface: palette.sonicSilver,
+  // End of Updated 14 / Nov / 22
 };
 
 export default globalPalette;

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

@@ -1,18 +1,23 @@
 import { jobsPalette as palette } from '@hero-design/colors';
 import swag from './swag';
-import type { SystemPalette } from './types';
+import type { SystemPalette, BrandSystemPalette } from './types';
+
+const jobsBrandSystemPallete: BrandSystemPalette = {
+  primary: palette.apple,
+  onPrimary: palette.white,
+  secondary: palette.maasstrichtBlueLight30,
+  onSecondary: palette.white,
+  defaultSurface: palette.white,
+  highlightedSurface: palette.hitPinkLight90,
+  pressedSurface: palette.appleLight10,
+
+  decorativePrimary: palette.hitPink,
+  decorativePrimarySurface: palette.hitPinkLight80,
+};
 
 const jobsSystemPalette: SystemPalette = {
   ...swag,
-
-  primary: palette.hitPink,
-  mutedPrimary: palette.hitPinkLight90,
-  onPrimary: palette.maasstrichtBlue,
-  secondary: palette.apple,
-  mutedSecondary: palette.maasstrichtBlueLight50,
-  disabledSecondary: palette.hitPinkLight50,
-  highlightedSurface: palette.hitPinkLight80,
-  lightHighlightedSurface: palette.hitPinkLight90,
+  ...jobsBrandSystemPallete,
 };
 
 export default jobsSystemPalette;

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

@@ -8,19 +8,15 @@ 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,
@@ -28,7 +24,6 @@ const legacySystemPalette: LegacySystemPalette = {
   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,
@@ -41,13 +36,18 @@ const legacySystemPalette: LegacySystemPalette = {
   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
+  // Updated 14 / Nov / 22
+  mutedGlobalPrimary: palette.maasstrichtBlueLight30,
+  onGlobalPrimary: palette.white,
+  globalSecondary: palette.maasstrichtBlueLight30,
+  globalPrimaryOutline: palette.maasstrichtBlue,
+  globalSecondaryOutline: palette.greyLight75,
 };
 
 export default legacySystemPalette;

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

@@ -1,65 +1,44 @@
 import { swagPalette as palette } from '@hero-design/colors';
-import type { SystemPalette } from './types';
+import type {
+  SystemPalette,
+  BrandSystemPalette,
+  LegacyBrandSystemPalette,
+} from './types';
 import globalPalette from './global';
+import legacySystemPalette from './legacySystemPalette';
 
-const swagSystemPalette: SystemPalette = {
-  // Legacy
-  globalPrimary: palette.maasstrichtBlue,
-  globalPrimaryLight: palette.maasstrichtBlueLight50,
-  globalPrimaryBackground: palette.maasstrichtBlueLight90,
-  primaryLight: palette.violetLight50,
-  primaryDark: palette.scarletGumLight30, // DEPRECATED
-  primaryBackground: palette.violetLight90,
-  primaryBackgroundDark: palette.maasstrichtBlueLight30,
-  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,
-  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
+const swagBrandSystemPallete: BrandSystemPalette = {
+  primary: palette.scarletGum,
+  onPrimary: palette.white,
+  secondary: palette.scarletGumLight30,
+  onSecondary: palette.white,
+  defaultSurface: palette.greyLight90,
+  highlightedSurface: palette.scarletGumLight90,
+  pressedSurface: palette.scarletGumLight20,
 
-  // Global
-  ...globalPalette,
+  decorativePrimary: palette.white,
+  decorativePrimarySurface: palette.maasstrichtBlueLight80,
+};
 
-  // Brand
-  primary: palette.maasstrichtBlue,
+const swagLegacyBrandSystemPalette: LegacyBrandSystemPalette = {
   mutedPrimary: palette.maasstrichtBlueLight90,
-  onPrimary: palette.white,
-  secondary: palette.scarletGum,
-  onSecondary: palette.white,
+  highlightedSecondarySurface: palette.aliceBlue,
   mutedSecondary: palette.maasstrichtBlueLight50,
   disabledSecondary: palette.scarletGumLight50,
-  highlightedSurface: palette.scarletGumLight80,
-  highlightedSecondarySurface: palette.aliceBlue,
   lightHighlightedSurface: palette.scarletGumLight90,
 };
 
+const swagSystemPalette: SystemPalette = {
+  // TODO: Remove legacy in V8
+  // Legacy system
+  ...legacySystemPalette,
+  // Legacy brand
+  ...swagLegacyBrandSystemPalette,
+
+  // Global
+  ...globalPalette,
+  // Brand
+  ...swagBrandSystemPallete,
+};
+
 export default swagSystemPalette;