@hero-design/rn 7.22.2 → 7.23.0

package/src/theme/components/fab.ts

@@ -2,13 +2,13 @@ import type { GlobalTheme } from '../global';
 
 const getFABTheme = (theme: GlobalTheme) => {
   const colors = {
-    buttonBackground: theme.colors.backgroundDark,
-    icon: theme.colors.invertedText,
-    headerText: theme.colors.invertedText,
-    actionItemBackground: theme.colors.primaryBackgroundDark,
-    backdropBackground: theme.colors.backgroundDark,
-    titleText: theme.colors.invertedText,
-    actionItemText: theme.colors.invertedText,
+    buttonBackground: theme.colors.globalPrimary,
+    icon: theme.colors.onGlobalPrimary,
+    headerText: theme.colors.onGlobalPrimary,
+    actionItemBackground: theme.colors.globalPrimary,
+    backdropBackground: theme.colors.globalPrimary,
+    titleText: theme.colors.onGlobalPrimary,
+    actionItemText: theme.colors.onGlobalPrimary,
   };
 
   const sizes = {

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/refreshControl.ts

@@ -0,0 +1,11 @@
+import type { GlobalTheme } from '../global';
+
+const getRefreshControlTheme = (theme: GlobalTheme) => {
+  const colors = {
+    indicator: theme.colors.primary,
+  };
+
+  return { colors };
+};
+
+export default getRefreshControlTheme;

package/src/theme/components/richTextEditor.ts

@@ -2,13 +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,
-  };
-
-  const borderWidths = {
-    webViewBorderBottomWidth: 0.8,
+    toolbarBorderColor: theme.colors.globalSecondaryOutline,
+    toolbarBackgroundColor: theme.colors.neutralGlobalSurface,
+    toolbarButtonSelectedBackground: theme.colors.lightHighlightedSurface,
   };
 
   const sizes = {
@@ -26,9 +22,14 @@ const getRichTextEditorTheme = (theme: GlobalTheme) => {
     wrapperMarginBottom: theme.space.medium,
     toolbarHorizontalPadding: theme.space.small,
     editorPadding: theme.space.medium,
+    mention: theme.space.xsmall,
+  };
+
+  const radii = {
+    mention: theme.radii.medium,
   };
 
-  return { colors, space, borderWidths, fontSizes, sizes };
+  return { colors, space, fontSizes, sizes, radii };
 };
 
 export default getRichTextEditorTheme;

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/getTheme.ts

@@ -22,6 +22,7 @@ import getListTheme from './components/list';
 import getPinInputTheme from './components/pinInput';
 import getProgressTheme from './components/progress';
 import getRadioTheme from './components/radio';
+import getRefreshControlTheme from './components/refreshControl';
 import getRichTextEditorTheme from './components/richTextEditor';
 import getSectionHeadingTheme from './components/sectionHeading';
 import getSelectTheme from './components/select';
@@ -62,6 +63,7 @@ type Theme = GlobalTheme & {
     pinInput: ReturnType<typeof getPinInputTheme>;
     progress: ReturnType<typeof getProgressTheme>;
     radio: ReturnType<typeof getRadioTheme>;
+    refreshControl: ReturnType<typeof getRefreshControlTheme>;
     richTextEditor: ReturnType<typeof getRichTextEditorTheme>;
     sectionHeading: ReturnType<typeof getSectionHeadingTheme>;
     select: ReturnType<typeof getSelectTheme>;
@@ -108,6 +110,7 @@ const getTheme = (
       pinInput: getPinInputTheme(globalTheme),
       progress: getProgressTheme(globalTheme),
       radio: getRadioTheme(globalTheme),
+      refreshControl: getRefreshControlTheme(globalTheme),
       richTextEditor: getRichTextEditorTheme(globalTheme),
       sectionHeading: getSectionHeadingTheme(globalTheme),
       select: getSelectTheme(globalTheme),

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/jobs.ts

@@ -0,0 +1,18 @@
+import { jobsPalette as palette } from '@hero-design/colors';
+import swag from './swag';
+import type { SystemPalette } from './types';
+
+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,
+};
+
+export default jobsSystemPalette;

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;