@hero-design/rn 8.11.3 → 8.12.0-rc.0

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

@@ -0,0 +1,48 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`work returns correct theme object 1`] = `
+Object {
+  "archived": "#abacaf",
+  "archivedSurface": "#f1f2f3",
+  "darkGlobalSurface": "#001f23",
+  "decorativePrimary": "#ffd500",
+  "decorativePrimarySurface": "#fff7cc",
+  "defaultGlobalSurface": "#ffffff",
+  "defaultSurface": "#ffffff",
+  "disabledOnDefaultGlobalSurface": "#bfc1c5",
+  "disabledOutline": "#bfc1c5",
+  "error": "#f46363",
+  "errorSurface": "#fcebe7",
+  "highlightedSurface": "#eaecf0",
+  "inactiveOnDefaultGlobalSurface": "#808f91",
+  "inactiveOutline": "#808f91",
+  "info": "#b5c3fd",
+  "infoSurface": "#ecf0ff",
+  "mutedArchived": "#bcbdbf",
+  "mutedError": "#f68282",
+  "mutedInfo": "#c4cffd",
+  "mutedOnDefaultGlobalSurface": "#4d6265",
+  "mutedSuccess": "#7bd897",
+  "mutedWarning": "#ffcb8d",
+  "neutralGlobalSurface": "#f6f6f7",
+  "onArchivedSurface": "#737479",
+  "onDarkGlobalSurface": "#ffffff",
+  "onDefaultGlobalSurface": "#001f23",
+  "onErrorSurface": "#de350b",
+  "onInfoSurface": "#4568fb",
+  "onPrimary": "#ffffff",
+  "onSecondary": "#ffffff",
+  "onSuccessSurface": "#017d6d",
+  "onWarningSurface": "#ffa234",
+  "overlayGlobalSurface": "#000000",
+  "pressedSurface": "#586a8a",
+  "primary": "#2e456d",
+  "primaryOutline": "#001f23",
+  "secondary": "#627492",
+  "secondaryOutline": "#e8e9ea",
+  "success": "#5ace7d",
+  "successSurface": "#f0fef4",
+  "warning": "#ffbe71",
+  "warningSurface": "#fff6eb",
+}
+`;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,51 @@
+import { defaultMobileDarkPalette as palette } from '@hero-design/colors';
+import type { GlobalSystemPalette } from './types';
+
+const globalPalette: GlobalSystemPalette = {
+  // Updated 21 / Nov / 22
+  // Surfaces
+  defaultGlobalSurface: palette.maasstrichtBlue,
+  onDefaultGlobalSurface: palette.white,
+  neutralGlobalSurface: palette.maasstrichtBlueLight15,
+  mutedOnDefaultGlobalSurface: palette.maasstrichtBlueLight70,
+  inactiveOnDefaultGlobalSurface: palette.maasstrichtBlueLight60,
+  disabledOnDefaultGlobalSurface: palette.greyDark20,
+  darkGlobalSurface: palette.white,
+  onDarkGlobalSurface: palette.maasstrichtBlue,
+  overlayGlobalSurface: palette.greyDark30,
+
+  // Outlines
+  primaryOutline: palette.white,
+  secondaryOutline: palette.maasstrichtBlueLight10,
+  inactiveOutline: palette.maasstrichtBlueLight60,
+  disabledOutline: palette.greyDark20,
+
+  // Accents
+  error: palette.pastelRed,
+  mutedError: palette.pastelRedLight20,
+  errorSurface: palette.linen,
+  onErrorSurface: palette.vermilion,
+
+  warning: palette.mellowApricot,
+  mutedWarning: palette.mellowApricotLight20,
+  warningSurface: palette.seashell,
+  onWarningSurface: palette.deepSaffron,
+
+  success: palette.emerald,
+  mutedSuccess: palette.emeraldLight20,
+  successSurface: palette.honeydew,
+  onSuccessSurface: palette.pineGreen,
+
+  info: palette.vodka,
+  mutedInfo: palette.vodkaLight20,
+  infoSurface: palette.aliceBlue,
+  onInfoSurface: palette.ultramarineBlue,
+
+  archived: palette.silverChalice,
+  mutedArchived: palette.silverChaliceLight20,
+  archivedSurface: palette.antiFlashWhite,
+  onArchivedSurface: palette.sonicSilver,
+  // End of Updated 21 / Nov / 22
+};
+
+export default globalPalette;

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

@@ -0,0 +1,25 @@
+import { swagDarkPalette as palette } from '@hero-design/colors';
+import type { SystemPalette, BrandSystemPalette } from './types';
+import globalDarkPalette from './globalDark';
+
+const swagDarkBrandSystemPalette: BrandSystemPalette = {
+  primary: palette.mauve,
+  onPrimary: palette.maasstrichtBlue,
+  secondary: palette.mauveLight30,
+  onSecondary: palette.maasstrichtBlue,
+  defaultSurface: palette.maasstrichtBlue,
+  highlightedSurface: palette.scarletGumDark65,
+  pressedSurface: palette.scarletGumLight20,
+
+  decorativePrimary: palette.maasstrichtBlue,
+  decorativePrimarySurface: palette.maasstrichtBlueLight10,
+};
+
+const swagDarkSystemPalette: SystemPalette = {
+  // Global
+  ...globalDarkPalette,
+  // Brand
+  ...swagDarkBrandSystemPalette,
+};
+
+export default swagDarkSystemPalette;

package/src/theme/global/index.ts

@@ -1,5 +1,6 @@
 import { scale as defaultScale } from './scale';
 import swagSystemPalette from './colors/swag';
+import swagDarkSystemPalette from './colors/swagDark';
 import workSystemPalette from './colors/work';
 import jobsSystemPalette from './colors/jobs';
 import walletSystemPalette from './colors/wallet';
@@ -43,6 +44,7 @@ export {
   getGlobalTheme,
   defaultScale,
   swagSystemPalette,
+  swagDarkSystemPalette,
   workSystemPalette,
   jobsSystemPalette,
   walletSystemPalette,

package/src/theme/index.ts

@@ -1,8 +1,9 @@
 import getTheme from './getTheme';
 import ThemeProvider, { useTheme } from './ThemeProvider';
-import ThemeSwitcher from './ThemeSwitcher';
+import ThemeSwitcher, { withTheme } from './ThemeSwitcher';
 import {
   swagSystemPalette,
+  swagDarkSystemPalette,
   workSystemPalette,
   jobsSystemPalette,
   walletSystemPalette,
@@ -16,11 +17,13 @@ const defaultTheme = getTheme();
 export type { Theme };
 
 export {
+  withTheme,
   getTheme,
   ThemeProvider,
   ThemeSwitcher,
   useTheme,
   swagSystemPalette,
+  swagDarkSystemPalette,
   workSystemPalette,
   jobsSystemPalette,
   walletSystemPalette,