@hero-design/rn 9.0.0-0 → 9.0.0-alpha.0

package/src/theme/components/typography.ts

@@ -26,6 +26,36 @@ const getTypographyTheme = (theme: GlobalTheme) => {
     xxxxxlarge: theme.fontSizes.xxxxxlarge,
     '6xlarge': theme.fontSizes['6xlarge'],
     '7xlarge': theme.fontSizes['7xlarge'],
+    caption: theme.fontSizes.small,
+    label: theme.fontSizes.xsmall,
+    titles: {
+      neutral: {
+        h1: theme.fontSizes['7xlarge'],
+        h2: theme.fontSizes.xxxxxlarge,
+        h3: theme.fontSizes.xxxxlarge,
+        h4: theme.fontSizes.xxxlarge,
+        h5: theme.fontSizes.xlarge,
+        h6: theme.fontSizes.xlarge,
+      },
+      playful: {
+        h1: theme.fontSizes['6xlarge'],
+        h2: theme.fontSizes.xxxxxlarge,
+        h3: theme.fontSizes.xxxxlarge,
+        h4: theme.fontSizes.xxxlarge,
+        h5: theme.fontSizes.xlarge,
+        h6: theme.fontSizes.large,
+      },
+    },
+    body: {
+      neutral: {
+        regular: theme.fontSizes.large,
+        small: theme.fontSizes.medium,
+      },
+      playful: {
+        regular: theme.fontSizes.xlarge,
+        small: theme.fontSizes.large,
+      },
+    },
   };
 
   const lineHeights = {
@@ -39,9 +69,110 @@ const getTypographyTheme = (theme: GlobalTheme) => {
     xxxxxlarge: theme.lineHeights.xxxxxlarge,
     '6xlarge': theme.lineHeights['6xlarge'],
     '7xlarge': theme.lineHeights['7xlarge'],
+    caption: theme.lineHeights.small,
+    label: theme.lineHeights.xsmall,
+    titles: {
+      neutral: {
+        h1: theme.lineHeights['7xlarge'],
+        h2: theme.lineHeights.xxxxxlarge,
+        h3: theme.lineHeights.xxxxlarge,
+        h4: theme.lineHeights.xxxlarge,
+        h5: theme.lineHeights.xxlarge,
+        h6: theme.lineHeights.xxlarge,
+      },
+      playful: {
+        h1: theme.lineHeights['6xlarge'],
+        h2: theme.lineHeights.xxxxxlarge,
+        h3: theme.lineHeights.xxxxlarge,
+        h4: theme.lineHeights.xxxlarge,
+        h5: theme.lineHeights.xlarge,
+        h6: theme.lineHeights.xxlarge,
+      },
+    },
+    body: {
+      neutral: {
+        regular: theme.lineHeights.large,
+        small: theme.lineHeights.medium,
+      },
+      playful: {
+        regular: theme.lineHeights.xlarge,
+        small: theme.lineHeights.large,
+      },
+    },
   };
 
-  return { colors, fonts: theme.fonts, fontSizes, lineHeights };
+  const letterSpacings = {
+    titles: {
+      neutral: {
+        h1: 0,
+        h2: 1.5,
+        h3: 0.24,
+        h4: 0,
+        h5: 0.24,
+        h6: 0.48,
+      },
+      playful: {
+        h1: 1.5,
+        h2: 1.5,
+        h3: 0.24,
+        h4: 0.24,
+        h5: 0.24,
+        h6: 0.48,
+      },
+    },
+    body: {
+      neutral: {
+        semiBold: 0.24,
+        regular: 0.48,
+        small: 0.48,
+      },
+      playful: {
+        semiBold: 0.54,
+        regular: 0.54,
+        small: 0.54,
+      },
+    },
+  };
+
+  const fontWeights = {
+    titles: {
+      neutral: {
+        h1: theme.fonts.neutral.regular,
+        h2: theme.fonts.neutral.semiBold,
+        h3: theme.fonts.neutral.semiBold,
+        h4: theme.fonts.neutral.semiBold,
+        h5: theme.fonts.neutral.semiBold,
+        h6: theme.fonts.neutral.regular,
+      },
+      playful: {
+        h1: theme.fonts.playful.semiBold,
+        h2: theme.fonts.playful.semiBold,
+        h3: theme.fonts.playful.semiBold,
+        h4: theme.fonts.playful.semiBold,
+        h5: theme.fonts.playful.semiBold,
+        h6: theme.fonts.playful.regular,
+      },
+    },
+    body: {
+      neutral: {
+        semiBold: theme.fonts.neutral.semiBold,
+        regular: theme.fonts.neutral.regular,
+      },
+      playful: {
+        semiBold: theme.fonts.playful.semiBold,
+        regular: theme.fonts.playful.regular,
+      },
+    },
+  };
+
+  return {
+    colors,
+    fonts: theme.fonts,
+    fontSizes,
+    lineHeights,
+    letterSpacings,
+    fontWeights,
+  };
 };
 
 export default getTypographyTheme;

package/src/theme/getTheme.ts

@@ -4,29 +4,31 @@ 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 getBadgeTheme, { BadgeThemeType } from './components/badge';
 import getBottomNavigationTheme from './components/bottomNavigation';
 import getBottomSheetTheme from './components/bottomSheet';
-import getButtonTheme from './components/button';
+import getButtonTheme, { ButtonThemeType } from './components/button';
 import getCalendarTheme from './components/calendar';
 import getCardTheme from './components/card';
-import getCarouselTheme from './components/carousel';
+import getCarouselTheme, { CarouselThemeType } from './components/carousel';
 import getCardCarouselTheme from './components/cardCarousel';
 import getCheckboxTheme from './components/checkbox';
+import getChipTheme from './components/chip';
 import getContentNavigatorTheme from './components/contentNavigator';
 import getDatePickerTheme from './components/datePicker';
 import getDividerTheme from './components/divider';
 import getDrawerTheme from './components/drawer';
-import getEmptyTheme from './components/empty';
-import getErrorTheme from './components/error';
-import getFABTheme from './components/fab';
+import getEmptyTheme, { EmptyThemeType } from './components/empty';
+import getErrorTheme, { ErrorThemeType } from './components/error';
+import getFABTheme, { FABThemeType } from './components/fab';
 import getIconTheme from './components/icon';
 import getImageTheme from './components/image';
 import getListTheme from './components/list';
 import getPageControlTheme from './components/pageControl';
-import getPinInputTheme from './components/pinInput';
+import getPinInputTheme, { PinInputThemeType } from './components/pinInput';
 import getProgressTheme from './components/progress';
 import getRadioTheme from './components/radio';
+import getRateTheme from './components/rate';
 import getRefreshControlTheme from './components/refreshControl';
 import getRichTextEditorTheme from './components/richTextEditor';
 import getSectionHeadingTheme from './components/sectionHeading';
@@ -34,11 +36,11 @@ import getSelectTheme from './components/select';
 import getSkeletonTheme from './components/skeleton';
 import getSliderTheme from './components/slider';
 import getSpinnerTheme from './components/spinner';
-import getSuccessTheme from './components/success';
+import getSuccessTheme, { SuccessThemeType } from './components/success';
 import getSwipeableTheme from './components/swipeable';
 import getSwitchTheme from './components/switch';
 import getTabsTheme from './components/tabs';
-import getTagTheme from './components/tag';
+import getTagTheme, { TagThemeType } from './components/tag';
 import getTextInputTheme from './components/textInput';
 import getTimePickerTheme from './components/timePicker';
 import getToastTheme from './components/toast';
@@ -53,29 +55,31 @@ type Theme = GlobalTheme & {
     alert: ReturnType<typeof getAlertTheme>;
     attachment: ReturnType<typeof getAttachmentTheme>;
     avatar: ReturnType<typeof getAvatarTheme>;
-    badge: ReturnType<typeof getBadgeTheme>;
+    badge: BadgeThemeType;
     bottomNavigation: ReturnType<typeof getBottomNavigationTheme>;
     bottomSheet: ReturnType<typeof getBottomSheetTheme>;
-    button: ReturnType<typeof getButtonTheme>;
+    button: ButtonThemeType;
     calendar: ReturnType<typeof getCalendarTheme>;
     card: ReturnType<typeof getCardTheme>;
-    carousel: ReturnType<typeof getCarouselTheme>;
+    carousel: CarouselThemeType;
     cardCarousel: ReturnType<typeof getCardCarouselTheme>;
     checkbox: ReturnType<typeof getCheckboxTheme>;
+    chip: ReturnType<typeof getChipTheme>;
     contentNavigator: ReturnType<typeof getContentNavigatorTheme>;
     datePicker: ReturnType<typeof getDatePickerTheme>;
     divider: ReturnType<typeof getDividerTheme>;
     drawer: ReturnType<typeof getDrawerTheme>;
-    empty: ReturnType<typeof getEmptyTheme>;
-    error: ReturnType<typeof getErrorTheme>;
-    fab: ReturnType<typeof getFABTheme>;
+    empty: EmptyThemeType;
+    error: ErrorThemeType;
+    fab: FABThemeType;
     icon: ReturnType<typeof getIconTheme>;
     image: ReturnType<typeof getImageTheme>;
     list: ReturnType<typeof getListTheme>;
     pageControl: ReturnType<typeof getPageControlTheme>;
-    pinInput: ReturnType<typeof getPinInputTheme>;
+    pinInput: PinInputThemeType;
     progress: ReturnType<typeof getProgressTheme>;
     radio: ReturnType<typeof getRadioTheme>;
+    rate: ReturnType<typeof getRateTheme>;
     refreshControl: ReturnType<typeof getRefreshControlTheme>;
     richTextEditor: ReturnType<typeof getRichTextEditorTheme>;
     sectionHeading: ReturnType<typeof getSectionHeadingTheme>;
@@ -83,11 +87,11 @@ type Theme = GlobalTheme & {
     skeleton: ReturnType<typeof getSkeletonTheme>;
     slider: ReturnType<typeof getSliderTheme>;
     spinner: ReturnType<typeof getSpinnerTheme>;
-    success: ReturnType<typeof getSuccessTheme>;
+    success: SuccessThemeType;
     swipeable: ReturnType<typeof getSwipeableTheme>;
     switch: ReturnType<typeof getSwitchTheme>;
     tabs: ReturnType<typeof getTabsTheme>;
-    tag: ReturnType<typeof getTagTheme>;
+    tag: TagThemeType;
     textInput: ReturnType<typeof getTextInputTheme>;
     timePicker: ReturnType<typeof getTimePickerTheme>;
     toast: ReturnType<typeof getToastTheme>;
@@ -117,6 +121,7 @@ const getTheme = (
       carousel: getCarouselTheme(globalTheme),
       cardCarousel: getCardCarouselTheme(globalTheme),
       checkbox: getCheckboxTheme(globalTheme),
+      chip: getChipTheme(globalTheme),
       contentNavigator: getContentNavigatorTheme(globalTheme),
       datePicker: getDatePickerTheme(globalTheme),
       divider: getDividerTheme(globalTheme),
@@ -131,6 +136,7 @@ const getTheme = (
       pinInput: getPinInputTheme(globalTheme),
       progress: getProgressTheme(globalTheme),
       radio: getRadioTheme(globalTheme),
+      rate: getRateTheme(globalTheme),
       refreshControl: getRefreshControlTheme(globalTheme),
       richTextEditor: getRichTextEditorTheme(globalTheme),
       sectionHeading: getSectionHeadingTheme(globalTheme),

package/src/theme/global/colors/__tests__/__snapshots__/eBens.spec.ts.snap

@@ -1,14 +1,14 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`eBens returns correct theme object 1`] = `
-Object {
+{
   "archived": "#abacaf",
-  "archivedSurface": "#f1f2f3",
+  "archivedSurface": "#dadbde",
   "darkGlobalSurface": "#001f23",
   "decorativePrimary": "#c38cee",
   "decorativePrimarySurface": "#f3e8fc",
   "defaultGlobalSurface": "#ffffff",
-  "defaultSurface": "#f6f6f7",
+  "defaultSurface": "#ffffff",
   "disabledOnDefaultGlobalSurface": "#bfc1c5",
   "disabledOutline": "#bfc1c5",
   "error": "#f46363",
@@ -25,17 +25,17 @@ Object {
   "mutedSuccess": "#7bd897",
   "mutedWarning": "#ffcb8d",
   "neutralGlobalSurface": "#f6f6f7",
-  "onArchivedSurface": "#737479",
+  "onArchivedSurface": "#606065",
   "onDarkGlobalSurface": "#ffffff",
   "onDefaultGlobalSurface": "#001f23",
-  "onErrorSurface": "#de350b",
-  "onInfoSurface": "#4568fb",
+  "onErrorSurface": "#cb300a",
+  "onInfoSurface": "#355bfb",
   "onPrimary": "#ffffff",
   "onSecondary": "#ffffff",
   "onSuccessSurface": "#017d6d",
-  "onWarningSurface": "#ffa234",
+  "onWarningSurface": "#ac5d00",
   "overlayGlobalSurface": "#000000",
-  "pressedSurface": "#9d37b5",
+  "pressedSurface": "#6a0482",
   "primary": "#8505a2",
   "primaryOutline": "#001f23",
   "secondary": "#aa50be",

package/src/theme/global/colors/__tests__/__snapshots__/global.spec.ts.snap

@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`global returns correct theme object 1`] = `
-Object {
+{
   "archived": "#abacaf",
-  "archivedSurface": "#f1f2f3",
+  "archivedSurface": "#dadbde",
   "darkGlobalSurface": "#001f23",
   "defaultGlobalSurface": "#ffffff",
   "disabledOnDefaultGlobalSurface": "#bfc1c5",
@@ -21,13 +21,13 @@ Object {
   "mutedSuccess": "#7bd897",
   "mutedWarning": "#ffcb8d",
   "neutralGlobalSurface": "#f6f6f7",
-  "onArchivedSurface": "#737479",
+  "onArchivedSurface": "#606065",
   "onDarkGlobalSurface": "#ffffff",
   "onDefaultGlobalSurface": "#001f23",
-  "onErrorSurface": "#de350b",
-  "onInfoSurface": "#4568fb",
+  "onErrorSurface": "#cb300a",
+  "onInfoSurface": "#355bfb",
   "onSuccessSurface": "#017d6d",
-  "onWarningSurface": "#ffa234",
+  "onWarningSurface": "#ac5d00",
   "overlayGlobalSurface": "#000000",
   "primaryOutline": "#001f23",
   "secondaryOutline": "#e8e9ea",

package/src/theme/global/colors/__tests__/__snapshots__/globalDark.spec.ts.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`globalDark returns correct theme object 1`] = `
-Object {
+{
   "archived": "#68686d",
   "archivedSurface": "#344348",
   "darkGlobalSurface": "#ffffff",

package/src/theme/global/colors/__tests__/__snapshots__/jobs.spec.ts.snap

@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`jobs returns correct theme object 1`] = `
-Object {
+{
   "archived": "#abacaf",
-  "archivedSurface": "#f1f2f3",
+  "archivedSurface": "#dadbde",
   "darkGlobalSurface": "#001f23",
   "decorativePrimary": "#ffad79",
   "decorativePrimarySurface": "#ffefe4",
@@ -25,17 +25,17 @@ Object {
   "mutedSuccess": "#7bd897",
   "mutedWarning": "#ffcb8d",
   "neutralGlobalSurface": "#f6f6f7",
-  "onArchivedSurface": "#737479",
+  "onArchivedSurface": "#606065",
   "onDarkGlobalSurface": "#ffffff",
   "onDefaultGlobalSurface": "#001f23",
-  "onErrorSurface": "#de350b",
-  "onInfoSurface": "#4568fb",
+  "onErrorSurface": "#cb300a",
+  "onInfoSurface": "#355bfb",
   "onPrimary": "#ffffff",
   "onSecondary": "#ffffff",
   "onSuccessSurface": "#017d6d",
-  "onWarningSurface": "#ffa234",
+  "onWarningSurface": "#ac5d00",
   "overlayGlobalSurface": "#000000",
-  "pressedSurface": "#e6703f",
+  "pressedSurface": "#b64d22",
   "primary": "#e3602a",
   "primaryOutline": "#001f23",
   "secondary": "#4d6265",

package/src/theme/global/colors/__tests__/__snapshots__/swag.spec.ts.snap

@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`swag returns correct theme object 1`] = `
-Object {
+{
   "archived": "#abacaf",
-  "archivedSurface": "#f1f2f3",
+  "archivedSurface": "#dadbde",
   "darkGlobalSurface": "#001f23",
   "decorativePrimary": "#ffffff",
   "decorativePrimarySurface": "#ccd2d3",
@@ -25,17 +25,17 @@ Object {
   "mutedSuccess": "#7bd897",
   "mutedWarning": "#ffcb8d",
   "neutralGlobalSurface": "#f6f6f7",
-  "onArchivedSurface": "#737479",
+  "onArchivedSurface": "#606065",
   "onDarkGlobalSurface": "#ffffff",
   "onDefaultGlobalSurface": "#001f23",
-  "onErrorSurface": "#de350b",
-  "onInfoSurface": "#4568fb",
+  "onErrorSurface": "#cb300a",
+  "onInfoSurface": "#355bfb",
   "onPrimary": "#ffffff",
   "onSecondary": "#ffffff",
   "onSuccessSurface": "#017d6d",
-  "onWarningSurface": "#ffa234",
+  "onWarningSurface": "#ac5d00",
   "overlayGlobalSurface": "#000000",
-  "pressedSurface": "#664780",
+  "pressedSurface": "#33144d",
   "primary": "#401960",
   "primaryOutline": "#001f23",
   "secondary": "#795e90",

package/src/theme/global/colors/__tests__/__snapshots__/swagDark.spec.ts.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`swagDark returns correct theme object 1`] = `
-Object {
+{
   "archived": "#68686d",
   "archivedSurface": "#344348",
   "darkGlobalSurface": "#ffffff",

package/src/theme/global/colors/__tests__/__snapshots__/wallet.spec.ts.snap

@@ -1,14 +1,14 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`wallet returns correct theme object 1`] = `
-Object {
+{
   "archived": "#abacaf",
-  "archivedSurface": "#f1f2f3",
+  "archivedSurface": "#dadbde",
   "darkGlobalSurface": "#001f23",
   "decorativePrimary": "#8999ff",
   "decorativePrimarySurface": "#e7ebff",
   "defaultGlobalSurface": "#ffffff",
-  "defaultSurface": "#dce0ff",
+  "defaultSurface": "#ffffff",
   "disabledOnDefaultGlobalSurface": "#bfc1c5",
   "disabledOutline": "#bfc1c5",
   "error": "#f46363",
@@ -25,17 +25,17 @@ Object {
   "mutedSuccess": "#7bd897",
   "mutedWarning": "#ffcb8d",
   "neutralGlobalSurface": "#f6f6f7",
-  "onArchivedSurface": "#737479",
+  "onArchivedSurface": "#606065",
   "onDarkGlobalSurface": "#ffffff",
   "onDefaultGlobalSurface": "#001f23",
-  "onErrorSurface": "#de350b",
-  "onInfoSurface": "#4568fb",
+  "onErrorSurface": "#cb300a",
+  "onInfoSurface": "#355bfb",
   "onPrimary": "#ffffff",
   "onSecondary": "#ffffff",
   "onSuccessSurface": "#017d6d",
-  "onWarningSurface": "#ffa234",
+  "onWarningSurface": "#ac5d00",
   "overlayGlobalSurface": "#000000",
-  "pressedSurface": "#6b77e5",
+  "pressedSurface": "#4853b5",
   "primary": "#5a68e2",
   "primaryOutline": "#001f23",
   "secondary": "#3f499e",

package/src/theme/global/colors/__tests__/__snapshots__/work.spec.ts.snap

@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`work returns correct theme object 1`] = `
-Object {
+{
   "archived": "#abacaf",
-  "archivedSurface": "#f1f2f3",
+  "archivedSurface": "#dadbde",
   "darkGlobalSurface": "#001f23",
   "decorativePrimary": "#ffd500",
   "decorativePrimarySurface": "#fff7cc",
@@ -13,7 +13,7 @@ Object {
   "disabledOutline": "#bfc1c5",
   "error": "#f46363",
   "errorSurface": "#fcebe7",
-  "highlightedSurface": "#eaecf0",
+  "highlightedSurface": "#e6e6e6",
   "inactiveOnDefaultGlobalSurface": "#808f91",
   "inactiveOutline": "#808f91",
   "info": "#b5c3fd",
@@ -25,20 +25,20 @@ Object {
   "mutedSuccess": "#7bd897",
   "mutedWarning": "#ffcb8d",
   "neutralGlobalSurface": "#f6f6f7",
-  "onArchivedSurface": "#737479",
+  "onArchivedSurface": "#606065",
   "onDarkGlobalSurface": "#ffffff",
   "onDefaultGlobalSurface": "#001f23",
-  "onErrorSurface": "#de350b",
-  "onInfoSurface": "#4568fb",
+  "onErrorSurface": "#cb300a",
+  "onInfoSurface": "#355bfb",
   "onPrimary": "#ffffff",
   "onSecondary": "#ffffff",
   "onSuccessSurface": "#017d6d",
-  "onWarningSurface": "#ffa234",
+  "onWarningSurface": "#ac5d00",
   "overlayGlobalSurface": "#000000",
-  "pressedSurface": "#586a8a",
-  "primary": "#2e456d",
+  "pressedSurface": "#000000",
+  "primary": "#000000",
   "primaryOutline": "#001f23",
-  "secondary": "#627492",
+  "secondary": "#4d4d4d",
   "secondaryOutline": "#e8e9ea",
   "success": "#5ace7d",
   "successSurface": "#f0fef4",

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

@@ -7,9 +7,9 @@ const eBensBrandSystemPallete: BrandSystemPalette = {
   onPrimary: palette.white,
   secondary: palette.violetLight30,
   onSecondary: palette.white,
-  defaultSurface: palette.greyLight90,
+  defaultSurface: palette.white,
   highlightedSurface: palette.violetLight90,
-  pressedSurface: palette.violetLight20,
+  pressedSurface: palette.violetDark20,
 
   decorativePrimary: palette.mauve,
   decorativePrimarySurface: palette.mauveLight80,

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

@@ -24,12 +24,12 @@ const globalPalette: GlobalSystemPalette = {
   error: palette.pastelRed,
   mutedError: palette.pastelRedLight20,
   errorSurface: palette.linen,
-  onErrorSurface: palette.vermilion,
+  onErrorSurface: palette.amaranthaRed,
 
   warning: palette.mellowApricot,
   mutedWarning: palette.mellowApricotLight20,
   warningSurface: palette.seashell,
-  onWarningSurface: palette.deepSaffron,
+  onWarningSurface: palette.orangeBrown,
 
   success: palette.emerald,
   mutedSuccess: palette.emeraldLight20,
@@ -39,12 +39,12 @@ const globalPalette: GlobalSystemPalette = {
   info: palette.vodka,
   mutedInfo: palette.vodkaLight20,
   infoSurface: palette.aliceBlue,
-  onInfoSurface: palette.ultramarineBlue,
+  onInfoSurface: palette.gentianFlower,
 
   archived: palette.silverChalice,
   mutedArchived: palette.silverChaliceLight20,
-  archivedSurface: palette.antiFlashWhite,
-  onArchivedSurface: palette.sonicSilver,
+  archivedSurface: palette.cumberlandFog,
+  onArchivedSurface: palette.windsorGrey,
   // End of Updated 21 / Nov / 22
 };
 

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

@@ -9,7 +9,7 @@ const jobsBrandSystemPallete: BrandSystemPalette = {
   onSecondary: palette.white,
   defaultSurface: palette.white,
   highlightedSurface: palette.hitPinkLight90,
-  pressedSurface: palette.appleLight10,
+  pressedSurface: palette.appleDark20,
 
   decorativePrimary: palette.hitPink,
   decorativePrimarySurface: palette.hitPinkLight80,

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

@@ -9,7 +9,7 @@ const swagBrandSystemPallete: BrandSystemPalette = {
   onSecondary: palette.white,
   defaultSurface: palette.greyLight90,
   highlightedSurface: palette.scarletGumLight90,
-  pressedSurface: palette.scarletGumLight20,
+  pressedSurface: palette.scarletGumDark20,
 
   decorativePrimary: palette.white,
   decorativePrimarySurface: palette.maasstrichtBlueLight80,

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

@@ -7,9 +7,9 @@ const walletBrandSystemPallete: BrandSystemPalette = {
   onPrimary: palette.white,
   secondary: palette.royalBlueDark30,
   onSecondary: palette.white,
-  defaultSurface: palette.frenchSkyLight70,
+  defaultSurface: palette.white,
   highlightedSurface: palette.royalBlueLight90,
-  pressedSurface: palette.royalBlueLight10,
+  pressedSurface: palette.royalBlueDark20,
 
   decorativePrimary: palette.frenchSky,
   decorativePrimarySurface: palette.frenchSkyLight80,

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.policeBlue,
+  primary: palette.black,
   onPrimary: palette.white,
-  secondary: palette.policeBlueLight25,
+  secondary: palette.blackLight30,
   onSecondary: palette.white,
   defaultSurface: palette.white,
-  highlightedSurface: palette.policeBlueLight90,
-  pressedSurface: palette.policeBlueLight20,
+  highlightedSurface: palette.blackLight90,
+  pressedSurface: palette.black,
 
   decorativePrimary: palette.gold,
   decorativePrimarySurface: palette.goldLight80,

package/src/theme/global/index.ts

@@ -12,6 +12,7 @@ import { getSizes } from './sizes';
 import { getBorderWidths, getRadii } from './borders';
 import type { Scale } from './scale';
 import type { SystemPalette } from './colors/types';
+import { getShadows } from './shadows';
 
 const getGlobalTheme = (scale: Scale, systemPalette: SystemPalette) => {
   const fonts = getFonts(scale.font);
@@ -21,6 +22,7 @@ const getGlobalTheme = (scale: Scale, systemPalette: SystemPalette) => {
   const space = getSpace(scale.space);
   const sizes = getSizes(scale.size);
   const radii = getRadii(scale.radius);
+  const shadows = getShadows(systemPalette);
 
   return {
     colors: {
@@ -33,6 +35,7 @@ const getGlobalTheme = (scale: Scale, systemPalette: SystemPalette) => {
     space,
     sizes,
     radii,
+    shadows,
   };
 };
 

package/src/theme/global/shadows.ts

@@ -0,0 +1,19 @@
+import type { SystemPalette } from '.';
+
+const getShadows = (systemPalette: SystemPalette) => ({
+  default: {
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowColor: systemPalette.primaryOutline,
+    shadowOpacity: 0.12,
+    shadowRadius: 4,
+    elevation: 3,
+  },
+});
+
+type Shadows = ReturnType<typeof getShadows>;
+
+export { getShadows };
+export type { Shadows };