@hero-design/rn 8.65.1 → 8.67.0-alpha.0

package/src/theme/components/card.ts

@@ -9,6 +9,7 @@ const getCardTheme = (theme: GlobalTheme) => {
     warning: theme.colors.warning,
     danger: theme.colors.error,
     archived: theme.colors.archived,
+    neutral: theme.colors.neutralGlobalSurface,
   };
 
   const sizes = {

package/src/theme/components/fab.ts

@@ -2,12 +2,12 @@ import type { GlobalTheme } from '../global';
 
 const getFABTheme = (theme: GlobalTheme) => {
   const colors = {
-    buttonBackground: theme.colors.primary,
-    buttonPressedBackground: theme.colors.pressedSurface,
-    buttonActiveBackground: theme.colors.pressedSurface,
+    buttonBackground: theme.colors.overlayGlobalSurface,
+    buttonPressedBackground: theme.colors.overlayGlobalSurface,
+    buttonActiveBackground: theme.colors.overlayGlobalSurface,
     icon: theme.colors.onPrimary,
-    actionItemBackground: theme.colors.secondary,
-    actionItemPressedBackground: theme.colors.pressedSurface,
+    actionItemBackground: theme.colors.overlayGlobalSurface,
+    actionItemPressedBackground: theme.colors.overlayGlobalSurface,
     backdropBackground: theme.colors.overlayGlobalSurface,
     titleText: theme.colors.onPrimary,
     actionItemText: theme.colors.onPrimary,

package/src/theme/getTheme.ts

@@ -1,4 +1,4 @@
-import { getGlobalTheme, defaultScale, swagSystemPalette } from './global';
+import { getGlobalTheme, defaultScale, swagLightSystemPalette } from './global';
 
 import getAccordionTheme from './components/accordion';
 import getAlertTheme from './components/alert';
@@ -102,7 +102,7 @@ type Theme = GlobalTheme & {
 
 const getTheme = (
   scale: Scale = defaultScale,
-  systemPallete: SystemPalette = swagSystemPalette
+  systemPallete: SystemPalette = swagLightSystemPalette
 ): Theme => {
   const globalTheme = getGlobalTheme(scale, systemPallete);
   return {

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

@@ -0,0 +1,48 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`swagDark returns correct theme object 1`] = `
+{
+  "archived": "#abacaf",
+  "archivedSurface": "#dadbde",
+  "darkGlobalSurface": "#001f23",
+  "decorativePrimary": "#FDFBFF",
+  "decorativePrimarySurface": "#DDC8F5",
+  "defaultGlobalSurface": "#ffffff",
+  "defaultSurface": "#FDFBFF",
+  "disabledOnDefaultGlobalSurface": "#bfc1c5",
+  "disabledOutline": "#bfc1c5",
+  "error": "#f46363",
+  "errorSurface": "#fcebe7",
+  "highlightedSurface": "#f1e9fb",
+  "inactiveOnDefaultGlobalSurface": "#808f91",
+  "inactiveOutline": "#808f91",
+  "info": "#b5c3fd",
+  "infoSurface": "#ecf0ff",
+  "mutedArchived": "#bcbdbf",
+  "mutedError": "#f68282",
+  "mutedInfo": "#c4cffd",
+  "mutedOnDefaultGlobalSurface": "#4d6265",
+  "mutedSuccess": "#7bd897",
+  "mutedWarning": "#ffcb8d",
+  "neutralGlobalSurface": "#f6f6f7",
+  "onArchivedSurface": "#606065",
+  "onDarkGlobalSurface": "#ffffff",
+  "onDefaultGlobalSurface": "#001f23",
+  "onErrorSurface": "#cb300a",
+  "onInfoSurface": "#355bfb",
+  "onPrimary": "#FDFBFF",
+  "onSecondary": "#ffffff",
+  "onSuccessSurface": "#017d6d",
+  "onWarningSurface": "#ac5d00",
+  "overlayGlobalSurface": "#000000",
+  "pressedSurface": "#380060",
+  "primary": "#460078",
+  "primaryOutline": "#001f23",
+  "secondary": "#B382FD",
+  "secondaryOutline": "#e8e9ea",
+  "success": "#5ace7d",
+  "successSurface": "#f0fef4",
+  "warning": "#ffbe71",
+  "warningSurface": "#fff6eb",
+}
+`;

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

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

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

@@ -0,0 +1,25 @@
+import { swagLightPalette as palette } from '@hero-design/colors';
+import type { SystemPalette, BrandSystemPalette } from './types';
+import globalPalette from './global';
+
+const swagBrandSystemPallete: BrandSystemPalette = {
+  primary: palette.darkViolet,
+  onPrimary: '#FDFBFF',
+  secondary: '#B382FD',
+  onSecondary: palette.white,
+  defaultSurface: '#FDFBFF',
+  highlightedSurface: palette.violetLight90,
+  pressedSurface: palette.darkVioletDark20,
+
+  decorativePrimary: '#FDFBFF',
+  decorativePrimarySurface: '#DDC8F5',
+};
+
+const swagSystemPalette: SystemPalette = {
+  // Global
+  ...globalPalette,
+  // Brand
+  ...swagBrandSystemPallete,
+};
+
+export default swagSystemPalette;

package/src/theme/global/index.ts

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

package/src/theme/index.ts

@@ -3,6 +3,7 @@ import ThemeProvider, { useTheme } from './ThemeProvider';
 import ThemeSwitcher, { withTheme } from './ThemeSwitcher';
 import {
   swagSystemPalette,
+  swagLightSystemPalette,
   swagDarkSystemPalette,
   workSystemPalette,
   jobsSystemPalette,
@@ -23,6 +24,7 @@ export {
   ThemeSwitcher,
   useTheme,
   swagSystemPalette,
+  swagLightSystemPalette,
   swagDarkSystemPalette,
   workSystemPalette,
   jobsSystemPalette,