@hero-design/rn 8.91.1 → 8.91.4

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

@@ -4,6 +4,7 @@ exports[`swagLightJobs returns correct theme object 1`] = `
 {
   "archived": "#abacaf",
   "archivedSurface": "#dadbde",
+  "black": "#000000",
   "darkGlobalSurface": "#001f23",
   "decorativePrimary": "#fdfbff",
   "decorativePrimarySurface": "#dacce4",
@@ -16,16 +17,17 @@ exports[`swagLightJobs returns correct theme object 1`] = `
   "error": "#f46363",
   "errorSurface": "#fcebe7",
   "highlightedSurface": "#f1e9fb",
-  "inactiveOnDefaultGlobalSurface": "#89898a",
-  "inactiveOutline": "#89898a",
+  "inactiveOnDefaultGlobalSurface": "#808f91",
+  "inactiveOutline": "#808f91",
   "info": "#b5c3fd",
   "infoSurface": "#ecf0ff",
   "mutedArchived": "#bcbdbf",
   "mutedError": "#f68282",
   "mutedInfo": "#c4cffd",
-  "mutedOnDefaultGlobalSurface": "#59595b",
+  "mutedOnDefaultGlobalSurface": "#4d6265",
   "mutedSuccess": "#7bd897",
   "mutedWarning": "#ffcb8d",
+  "name": "swagLightJobs",
   "neutralGlobalSurface": "#f6f6f7",
   "onArchivedSurface": "#606065",
   "onDarkGlobalSurface": "#ffffff",
@@ -47,5 +49,6 @@ exports[`swagLightJobs returns correct theme object 1`] = `
   "successSurface": "#f0fef4",
   "warning": "#ffbe71",
   "warningSurface": "#fff6eb",
+  "white": "#ffffff",
 }
 `;

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

@@ -4,6 +4,7 @@ exports[`wallet returns correct theme object 1`] = `
 {
   "archived": "#abacaf",
   "archivedSurface": "#dadbde",
+  "black": "#000000",
   "darkGlobalSurface": "#001f23",
   "decorativePrimary": "#8999ff",
   "decorativePrimarySurface": "#e7ebff",
@@ -44,5 +45,6 @@ exports[`wallet returns correct theme object 1`] = `
   "successSurface": "#f0fef4",
   "warning": "#ffbe71",
   "warningSurface": "#fff6eb",
+  "white": "#ffffff",
 }
 `;

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

@@ -4,6 +4,7 @@ exports[`work returns correct theme object 1`] = `
 {
   "archived": "#abacaf",
   "archivedSurface": "#dadbde",
+  "black": "#000000",
   "darkGlobalSurface": "#001f23",
   "decorativePrimary": "#ffd500",
   "decorativePrimarySurface": "#fff7cc",
@@ -44,5 +45,6 @@ exports[`work returns correct theme object 1`] = `
   "successSurface": "#f0fef4",
   "warning": "#ffbe71",
   "warningSurface": "#fff6eb",
+  "white": "#ffffff",
 }
 `;

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

@@ -58,6 +58,7 @@ const ehWorkDarkSystemPalette: SystemPalette = {
   decorativeSecondarySurface: '#4c1d95',
   // Theme Mode
   themeMode: 'dark',
+  name: 'ehWorkDark',
 };
 
 export default ehWorkDarkSystemPalette;

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

@@ -46,6 +46,9 @@ const globalPalette: GlobalSystemPalette = {
   archivedSurface: palette.cumberlandFog,
   onArchivedSurface: palette.windsorGrey,
   // End of Updated 21 / Nov / 22
+
+  black: '#000000',
+  white: '#ffffff',
 };
 
 export default globalPalette;

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

@@ -21,6 +21,7 @@ const swagSystemPalette: SystemPalette = {
   ...swagLightGlobalPalette,
   // Brand
   ...swagBrandSystemPallete,
+  name: 'swagLight',
 };
 
 export default swagSystemPalette;

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

@@ -5,10 +5,10 @@ import globalPalette from './global';
 const swagLightGlobalPalette: GlobalSystemPalette = {
   ...globalPalette,
   onDefaultGlobalSurface: palette.offBlack,
-  mutedOnDefaultGlobalSurface: palette.offBlackLight30,
-  inactiveOnDefaultGlobalSurface: palette.offBlackLight50,
+  mutedOnDefaultGlobalSurface: '#4d6265',
+  inactiveOnDefaultGlobalSurface: '#808f91',
   primaryOutline: palette.offBlack,
-  inactiveOutline: palette.offBlackLight50,
+  inactiveOutline: '#808f91',
 };
 
 export default swagLightGlobalPalette;

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

@@ -1,7 +1,9 @@
 import swagLightSystemPalette from './swagLight';
+import { SystemPalette } from './types';
 
-const swagLightJobsSystemPalette = {
+const swagLightJobsSystemPalette: SystemPalette = {
   ...swagLightSystemPalette,
+  name: 'swagLightJobs',
   secondary: '#40d1ff',
   onSecondary: '#460078',
   secondaryHighlightedSurface: '#ecfaff',

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

@@ -65,7 +65,9 @@ export type BrandSystemPalette = {
 };
 
 export type ThemeMode = 'light' | 'dark';
+export type ThemeName = 'swagLight' | 'swagLightJobs' | 'ehWorkDark';
 export type SystemPalette = GlobalSystemPalette &
   BrandSystemPalette & {
     themeMode?: ThemeMode;
+    name?: ThemeName;
   };

package/src/theme/global/shadows/__tests__/__snapshots__/ehWorkDark.spec.ts.snap

@@ -0,0 +1,36 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ehWorkDarkShadowPalette returns correct theme object 1`] = `
+{
+  "cardDrawer": {
+    "elevation": 6,
+    "shadowColor": "#000000",
+    "shadowOffset": {
+      "height": 2,
+      "width": 0,
+    },
+    "shadowOpacity": 0.56,
+    "shadowRadius": 2,
+  },
+  "default": {
+    "elevation": 3,
+    "shadowColor": "#a9a9b2",
+    "shadowOffset": {
+      "height": 2,
+      "width": 0,
+    },
+    "shadowOpacity": 0.12,
+    "shadowRadius": 4,
+  },
+  "tabBar": {
+    "elevation": 10,
+    "shadowColor": "#000000",
+    "shadowOffset": {
+      "height": -4,
+      "width": 0,
+    },
+    "shadowOpacity": 0.24,
+    "shadowRadius": 6,
+  },
+}
+`;

package/src/theme/global/shadows/__tests__/__snapshots__/swagLight.spec.ts.snap

@@ -0,0 +1,36 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`swagLightShadowPalette returns correct theme object 1`] = `
+{
+  "cardDrawer": {
+    "elevation": 6,
+    "shadowColor": "#001f23",
+    "shadowOffset": {
+      "height": 2,
+      "width": 0,
+    },
+    "shadowOpacity": 0.12,
+    "shadowRadius": 2,
+  },
+  "default": {
+    "elevation": 3,
+    "shadowColor": "#121214",
+    "shadowOffset": {
+      "height": 2,
+      "width": 0,
+    },
+    "shadowOpacity": 0.12,
+    "shadowRadius": 4,
+  },
+  "tabBar": {
+    "elevation": 10,
+    "shadowColor": "#001f23",
+    "shadowOffset": {
+      "height": -4,
+      "width": 0,
+    },
+    "shadowOpacity": 0.04,
+    "shadowRadius": 6,
+  },
+}
+`;

package/src/theme/global/shadows/__tests__/__snapshots__/swagLightJobs.spec.ts.snap

@@ -0,0 +1,36 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`swagLightJobsShadowPalette returns correct theme object 1`] = `
+{
+  "cardDrawer": {
+    "elevation": 6,
+    "shadowColor": "#001f23",
+    "shadowOffset": {
+      "height": 2,
+      "width": 0,
+    },
+    "shadowOpacity": 0.12,
+    "shadowRadius": 2,
+  },
+  "default": {
+    "elevation": 3,
+    "shadowColor": "#121214",
+    "shadowOffset": {
+      "height": 2,
+      "width": 0,
+    },
+    "shadowOpacity": 0.12,
+    "shadowRadius": 4,
+  },
+  "tabBar": {
+    "elevation": 10,
+    "shadowColor": "#001f23",
+    "shadowOffset": {
+      "height": -4,
+      "width": 0,
+    },
+    "shadowOpacity": 0.04,
+    "shadowRadius": 6,
+  },
+}
+`;

package/src/theme/global/shadows/__tests__/ehWorkDark.spec.ts

@@ -0,0 +1,7 @@
+import ehWorkDarkShadowPalette from '../ehWorkDark';
+
+describe('ehWorkDarkShadowPalette', () => {
+  it('returns correct theme object', () => {
+    expect(ehWorkDarkShadowPalette).toMatchSnapshot();
+  });
+});

package/src/theme/global/shadows/__tests__/index.spec.ts

@@ -0,0 +1,24 @@
+import swagLightSystemPalette from '../../colors/swagLight';
+import swagLightJobsSystemPalette from '../../colors/swagLightJobs';
+import ehWorkDarkSystemPalette from '../../colors/ehWorkDark';
+import swagSystemPalette from '../../colors/swag';
+import { getShadows } from '../index';
+import swagLightShadowPalette from '../swagLight';
+import swagLightJobsShadowPalette from '../swagLightJobs';
+import ehWorkDarkShadowPalette from '../ehWorkDark';
+
+describe('getShadows', () => {
+  it.each`
+    colorPalette                  | shadowPalette
+    ${swagLightSystemPalette}     | ${swagLightShadowPalette}
+    ${swagLightJobsSystemPalette} | ${swagLightJobsShadowPalette}
+    ${ehWorkDarkSystemPalette}    | ${ehWorkDarkShadowPalette}
+    ${swagSystemPalette}          | ${swagLightShadowPalette}
+  `(
+    'should return the correct shadow palette for $colorPalette',
+    ({ colorPalette, shadowPalette }) => {
+      const actual = getShadows(colorPalette);
+      expect(actual).toEqual(shadowPalette);
+    }
+  );
+});

package/src/theme/global/shadows/__tests__/swagLight.spec.ts

@@ -0,0 +1,7 @@
+import swagLightShadowPalette from '../swagLight';
+
+describe('swagLightShadowPalette', () => {
+  it('returns correct theme object', () => {
+    expect(swagLightShadowPalette).toMatchSnapshot();
+  });
+});

package/src/theme/global/shadows/__tests__/swagLightJobs.spec.ts

@@ -0,0 +1,7 @@
+import swagLightJobsShadowPalette from '../swagLightJobs';
+
+describe('swagLightJobsShadowPalette', () => {
+  it('returns correct theme object', () => {
+    expect(swagLightJobsShadowPalette).toMatchSnapshot();
+  });
+});

package/src/theme/global/shadows/ehWorkDark.ts

@@ -0,0 +1,37 @@
+import ehWorkDarkSystemPalette from '../colors/ehWorkDark';
+import type { ShadowPalette } from './types';
+
+const ehWorkDarkShadowPalette: ShadowPalette = {
+  default: {
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowColor: ehWorkDarkSystemPalette.primaryOutline,
+    shadowOpacity: 0.12,
+    shadowRadius: 4,
+    elevation: 3,
+  },
+  cardDrawer: {
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowColor: '#000000',
+    shadowOpacity: 0.56,
+    shadowRadius: 2,
+    elevation: 6,
+  },
+  tabBar: {
+    shadowOffset: {
+      width: 0,
+      height: -4,
+    },
+    shadowColor: '#000000',
+    shadowOpacity: 0.24,
+    shadowRadius: 6,
+    elevation: 10,
+  },
+};
+
+export default ehWorkDarkShadowPalette;

package/src/theme/global/shadows/index.ts

@@ -0,0 +1,23 @@
+import swagLightShadowPalette from './swagLight';
+import swagLightJobsShadowPalette from './swagLightJobs';
+import ehWorkDarkShadowPalette from './ehWorkDark';
+
+import { SystemPalette } from '../colors/types';
+
+const getShadows = (palette: SystemPalette) => {
+  switch (palette.name) {
+    case 'swagLight':
+      return swagLightShadowPalette;
+    case 'swagLightJobs':
+      return swagLightJobsShadowPalette;
+    case 'ehWorkDark':
+      return ehWorkDarkShadowPalette;
+    default:
+      return swagLightShadowPalette;
+  }
+};
+
+type Shadows = ReturnType<typeof getShadows>;
+
+export { getShadows };
+export type { Shadows };

package/src/theme/global/shadows/swagLight.ts

@@ -0,0 +1,37 @@
+import swagLightSystemPalette from '../colors/swagLight';
+import type { ShadowPalette } from './types';
+
+const swagLightShadowPalette: ShadowPalette = {
+  default: {
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowColor: swagLightSystemPalette.primaryOutline,
+    shadowOpacity: 0.12,
+    shadowRadius: 4,
+    elevation: 3,
+  },
+  cardDrawer: {
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowColor: '#001f23',
+    shadowOpacity: 0.12,
+    shadowRadius: 2,
+    elevation: 6,
+  },
+  tabBar: {
+    shadowOffset: {
+      width: 0,
+      height: -4,
+    },
+    shadowColor: '#001f23',
+    shadowOpacity: 0.04,
+    shadowRadius: 6,
+    elevation: 10,
+  },
+};
+
+export default swagLightShadowPalette;

package/src/theme/global/shadows/swagLightJobs.ts

@@ -0,0 +1,37 @@
+import type { ShadowPalette } from './types';
+import swagLightJobsSystemPalette from '../colors/swagLightJobs';
+
+const swagLightJobsShadowPalette: ShadowPalette = {
+  default: {
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowColor: swagLightJobsSystemPalette.primaryOutline,
+    shadowOpacity: 0.12,
+    shadowRadius: 4,
+    elevation: 3,
+  },
+  cardDrawer: {
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowColor: '#001f23',
+    shadowOpacity: 0.12,
+    shadowRadius: 2,
+    elevation: 6,
+  },
+  tabBar: {
+    shadowOffset: {
+      width: 0,
+      height: -4,
+    },
+    shadowColor: '#001f23',
+    shadowOpacity: 0.04,
+    shadowRadius: 6,
+    elevation: 10,
+  },
+};
+
+export default swagLightJobsShadowPalette;

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

@@ -0,0 +1,16 @@
+export type ShadowStyles = {
+  shadowOffset: {
+    width: number;
+    height: number;
+  };
+  shadowColor: string;
+  shadowOpacity: number;
+  shadowRadius: number;
+  elevation: number;
+};
+
+export type ShadowPalette = {
+  default: ShadowStyles;
+  cardDrawer: ShadowStyles;
+  tabBar: ShadowStyles;
+};