@hero-design/rn 8.66.0 → 8.68.0-alpha.1

package/src/theme/__tests__/__snapshots__/index.spec.ts.snap

@@ -41,7 +41,7 @@ exports[`theme returns correct theme object 1`] = `
     },
     "attachment": {
       "colors": {
-        "highlightedBackground": "#ece8ef",
+        "highlightedBackground": "#F1E9FB",
       },
       "radii": {
         "container": 8,
@@ -62,7 +62,7 @@ exports[`theme returns correct theme object 1`] = `
       "colors": {
         "danger": "#f46363",
         "info": "#b5c3fd",
-        "primary": "#401960",
+        "primary": "#7622d7",
         "success": "#5ace7d",
         "text": "#ffffff",
         "warning": "#ffbe71",
@@ -111,7 +111,7 @@ exports[`theme returns correct theme object 1`] = `
         "archived": "#606065",
         "danger": "#cb300a",
         "info": "#355bfb",
-        "primary": "#401960",
+        "primary": "#7622d7",
         "success": "#017d6d",
         "text": "#ffffff",
         "warning": "#ac5d00",
@@ -140,7 +140,7 @@ exports[`theme returns correct theme object 1`] = `
     "bottomNavigation": {
       "colors": {
         "background": "#ffffff",
-        "shadow": "#401960",
+        "shadow": "#7622d7",
       },
       "shadows": {
         "elevation": 10,
@@ -200,18 +200,18 @@ exports[`theme returns correct theme object 1`] = `
         "invertedText": "#ffffff",
         "pressedBackground": {
           "filledDanger": "#fcebe7",
-          "filledPrimary": "#33144d",
-          "filledSecondary": "#33144d",
+          "filledPrimary": "#380060",
+          "filledSecondary": "#380060",
           "outlineDanger": "#fcebe7",
-          "outlinedPrimary": "#ece8ef",
-          "outlinedSecondary": "#ece8ef",
+          "outlinedPrimary": "#F1E9FB",
+          "outlinedSecondary": "#F1E9FB",
           "textDanger": "#fcebe7",
-          "textPrimary": "#ece8ef",
-          "textSecondary": "#ece8ef",
+          "textPrimary": "#F1E9FB",
+          "textSecondary": "#F1E9FB",
         },
-        "primary": "#401960",
-        "secondary": "#795e90",
-        "textLoadingBackground": "#ece8ef",
+        "primary": "#7622d7",
+        "secondary": "#460078",
+        "textLoadingBackground": "#F1E9FB",
         "utilityBackground": "#ffffff",
       },
       "fontSize": {
@@ -246,7 +246,7 @@ exports[`theme returns correct theme object 1`] = `
         "background": "#ffffff",
         "border": "#001f23",
         "inverted": "#ffffff",
-        "primary": "#401960",
+        "primary": "#7622d7",
       },
       "radii": {
         "default": 999,
@@ -271,10 +271,10 @@ exports[`theme returns correct theme object 1`] = `
       "colors": {
         "archived": "#abacaf",
         "danger": "#f46363",
-        "dataCardIndicator": "#401960",
+        "dataCardIndicator": "#7622d7",
         "info": "#b5c3fd",
         "neutral": "#f6f6f7",
-        "primary": "#401960",
+        "primary": "#7622d7",
         "success": "#5ace7d",
         "warning": "#ffbe71",
       },
@@ -287,7 +287,7 @@ exports[`theme returns correct theme object 1`] = `
     },
     "cardCarousel": {
       "colors": {
-        "carouselItemBackground": "#f6f6f7",
+        "carouselItemBackground": "#FDFBFF",
       },
       "radii": {
         "card": 8,
@@ -351,7 +351,7 @@ exports[`theme returns correct theme object 1`] = `
         "filledBackground": "#ffffff",
         "outlinedBackground": "transparent",
         "primaryBackground": "#001f23",
-        "secondaryBackground": "#ece8ef",
+        "secondaryBackground": "#F1E9FB",
         "selectedPrimaryText": "#ffffff",
         "wrapperBorder": "#001f23",
         "wrapperSelectedBorder": "transparent",
@@ -460,7 +460,7 @@ exports[`theme returns correct theme object 1`] = `
     "error": {
       "colors": {
         "description": "#4d6265",
-        "fullScreenBackground": "#ccd2d3",
+        "fullScreenBackground": "#B382FD",
         "inPageBackground": "#f6f6f7",
         "title": "#001f23",
       },
@@ -493,15 +493,15 @@ exports[`theme returns correct theme object 1`] = `
     },
     "fab": {
       "colors": {
-        "actionItemBackground": "#795e90",
-        "actionItemPressedBackground": "#33144d",
-        "actionItemText": "#ffffff",
+        "actionItemBackground": "#460078",
+        "actionItemPressedBackground": "#380060",
+        "actionItemText": "#FDFBFF",
         "backdropBackground": "#000000",
-        "buttonActiveBackground": "#33144d",
-        "buttonBackground": "#401960",
-        "buttonPressedBackground": "#33144d",
-        "icon": "#ffffff",
-        "titleText": "#ffffff",
+        "buttonActiveBackground": "#380060",
+        "buttonBackground": "#7622d7",
+        "buttonPressedBackground": "#380060",
+        "icon": "#FDFBFF",
+        "titleText": "#FDFBFF",
       },
       "fontSizes": {
         "actionItemText": 16,
@@ -552,8 +552,8 @@ exports[`theme returns correct theme object 1`] = `
         "disabledText": "#bfc1c5",
         "info": "#b5c3fd",
         "invertedText": "#ffffff",
-        "primary": "#401960",
-        "secondary": "#795e90",
+        "primary": "#7622d7",
+        "secondary": "#460078",
         "success": "#5ace7d",
         "text": "#001f23",
         "warning": "#ffbe71",
@@ -574,7 +574,7 @@ exports[`theme returns correct theme object 1`] = `
     },
     "list": {
       "colors": {
-        "checkedListItemContainerBackground": "#ece8ef",
+        "checkedListItemContainerBackground": "#F1E9FB",
         "leadingStatus": {
           "archived": "#abacaf",
           "danger": "#f46363",
@@ -618,7 +618,7 @@ exports[`theme returns correct theme object 1`] = `
     },
     "pageControl": {
       "colors": {
-        "paginatorBackgroundColor": "#401960",
+        "paginatorBackgroundColor": "#7622d7",
       },
       "radii": {
         "paginatorBorderRadius": 999,
@@ -681,7 +681,7 @@ exports[`theme returns correct theme object 1`] = `
           "dangerInverted": "#ffffff",
           "info": "#b5c3fd",
           "infoInverted": "#ffffff",
-          "primary": "#401960",
+          "primary": "#7622d7",
           "primaryInverted": "#ffffff",
           "success": "#5ace7d",
           "successInverted": "#ffffff",
@@ -696,7 +696,7 @@ exports[`theme returns correct theme object 1`] = `
           "info": "#e8e9ea",
           "infoInverted": "#c4cffd",
           "primary": "#e8e9ea",
-          "primaryInverted": "#664780",
+          "primaryInverted": "#914edf",
           "success": "#e8e9ea",
           "successInverted": "#7bd897",
           "warning": "#e8e9ea",
@@ -717,8 +717,8 @@ exports[`theme returns correct theme object 1`] = `
         "circle": 2,
       },
       "colors": {
-        "checked": "#ece8ef",
-        "circle": "#401960",
+        "checked": "#F1E9FB",
+        "circle": "#7622d7",
         "intents": {
           "dark": "#f6f6f7",
           "light": "#ffffff",
@@ -736,7 +736,7 @@ exports[`theme returns correct theme object 1`] = `
     },
     "rate": {
       "colors": {
-        "iconStroke": "#401960",
+        "iconStroke": "#7622d7",
       },
       "spaces": {
         "iconWrapperMarginRight": 4,
@@ -745,7 +745,7 @@ exports[`theme returns correct theme object 1`] = `
     },
     "refreshControl": {
       "colors": {
-        "indicator": "#401960",
+        "indicator": "#7622d7",
       },
     },
     "richTextEditor": {
@@ -753,7 +753,7 @@ exports[`theme returns correct theme object 1`] = `
         "text": "#001f23",
         "toolbarBackgroundColor": "#f6f6f7",
         "toolbarBorderColor": "#e8e9ea",
-        "toolbarButtonSelectedBackground": "#ece8ef",
+        "toolbarButtonSelectedBackground": "#F1E9FB",
       },
       "fontSizes": {
         "editor": 14,
@@ -777,7 +777,7 @@ exports[`theme returns correct theme object 1`] = `
     "sectionHeading": {
       "colors": {
         "background": "#f6f6f7",
-        "backgroundSmall": "#ccd2d3",
+        "backgroundSmall": "#B382FD",
       },
       "space": {
         "headingHorizontalPadding": 16,
@@ -819,16 +819,16 @@ exports[`theme returns correct theme object 1`] = `
     },
     "slider": {
       "colors": {
-        "maximumTrackTint": "#ece8ef",
-        "minimumTrackTint": "#401960",
-        "thumbTint": "#401960",
+        "maximumTrackTint": "#F1E9FB",
+        "minimumTrackTint": "#7622d7",
+        "thumbTint": "#7622d7",
       },
     },
     "spinner": {
       "colors": {
         "dot": {
-          "inverted": "#ffffff",
-          "primary": "#401960",
+          "inverted": "#FDFBFF",
+          "primary": "#7622d7",
         },
       },
       "radii": {
@@ -852,7 +852,7 @@ exports[`theme returns correct theme object 1`] = `
     "success": {
       "colors": {
         "description": "#4d6265",
-        "fullScreenBackground": "#ccd2d3",
+        "fullScreenBackground": "#B382FD",
         "inPageBackground": "#f6f6f7",
         "title": "#001f23",
       },
@@ -883,7 +883,7 @@ exports[`theme returns correct theme object 1`] = `
       "colors": {
         "danger": "#f46363",
         "defaultContainerBackground": "#ffffff",
-        "primary": "#401960",
+        "primary": "#7622d7",
         "success": "#5ace7d",
       },
       "radii": {
@@ -896,14 +896,14 @@ exports[`theme returns correct theme object 1`] = `
     "switch": {
       "colors": {
         "backgroundColors": {
-          "checked": "#401960",
-          "disabled-checked": "#ece8ef",
+          "checked": "#7622d7",
+          "disabled-checked": "#F1E9FB",
           "disabled-unchecked": "#bfc1c5",
           "unchecked": "#808f91",
         },
         "selector": {
           "background": "#ffffff",
-          "textBackground": "#ccd2d3",
+          "textBackground": "#B382FD",
         },
         "thumb": "#ffffff",
       },
@@ -935,10 +935,10 @@ exports[`theme returns correct theme object 1`] = `
       },
       "colors": {
         "active": "#001f23",
-        "activeBackground": "#ccd2d3",
+        "activeBackground": "#B382FD",
         "headerBottom": "#e8e9ea",
         "inactive": "#001f23",
-        "indicator": "#401960",
+        "indicator": "#7622d7",
         "text": "#001f23",
       },
       "radii": {
@@ -968,8 +968,8 @@ exports[`theme returns correct theme object 1`] = `
         "dangerBackground": "#fcebe7",
         "info": "#355bfb",
         "infoBackground": "#ecf0ff",
-        "primary": "#401960",
-        "primaryBackground": "#ece8ef",
+        "primary": "#7622d7",
+        "primaryBackground": "#F1E9FB",
         "success": "#017d6d",
         "successBackground": "#f0fef4",
         "text": "#001f23",
@@ -1131,10 +1131,10 @@ exports[`theme returns correct theme object 1`] = `
         "danger": "#ffbe71",
         "disabled": "#bfc1c5",
         "error": "#f46363",
-        "iconButtonBackground": "#ece8ef",
+        "iconButtonBackground": "#F1E9FB",
         "info": "#b5c3fd",
-        "primary": "#401960",
-        "secondary": "#795e90",
+        "primary": "#7622d7",
+        "secondary": "#460078",
         "success": "#5ace7d",
       },
       "radii": {
@@ -1158,8 +1158,8 @@ exports[`theme returns correct theme object 1`] = `
         "disabled": "#bfc1c5",
         "info": "#355bfb",
         "inverted": "#ffffff",
-        "primary": "#401960",
-        "secondary": "#795e90",
+        "primary": "#7622d7",
+        "secondary": "#460078",
         "subdued": "#4d6265",
         "success": "#5ace7d",
         "warning": "#ffbe71",
@@ -1332,15 +1332,15 @@ exports[`theme returns correct theme object 1`] = `
     "archived": "#abacaf",
     "archivedSurface": "#dadbde",
     "darkGlobalSurface": "#001f23",
-    "decorativePrimary": "#ffffff",
-    "decorativePrimarySurface": "#ccd2d3",
+    "decorativePrimary": "#FDFBFF",
+    "decorativePrimarySurface": "#B382FD",
     "defaultGlobalSurface": "#ffffff",
-    "defaultSurface": "#f6f6f7",
+    "defaultSurface": "#FDFBFF",
     "disabledOnDefaultGlobalSurface": "#bfc1c5",
     "disabledOutline": "#bfc1c5",
     "error": "#f46363",
     "errorSurface": "#fcebe7",
-    "highlightedSurface": "#ece8ef",
+    "highlightedSurface": "#F1E9FB",
     "inactiveOnDefaultGlobalSurface": "#808f91",
     "inactiveOutline": "#808f91",
     "info": "#b5c3fd",
@@ -1357,15 +1357,15 @@ exports[`theme returns correct theme object 1`] = `
     "onDefaultGlobalSurface": "#001f23",
     "onErrorSurface": "#cb300a",
     "onInfoSurface": "#355bfb",
-    "onPrimary": "#ffffff",
+    "onPrimary": "#FDFBFF",
     "onSecondary": "#ffffff",
     "onSuccessSurface": "#017d6d",
     "onWarningSurface": "#ac5d00",
     "overlayGlobalSurface": "#000000",
-    "pressedSurface": "#33144d",
-    "primary": "#401960",
+    "pressedSurface": "#380060",
+    "primary": "#7622d7",
     "primaryOutline": "#001f23",
-    "secondary": "#795e90",
+    "secondary": "#460078",
     "secondaryOutline": "#e8e9ea",
     "success": "#5ace7d",
     "successSurface": "#f0fef4",

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": "#B382FD",
+  "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": "#7622d7",
+  "primaryOutline": "#001f23",
+  "secondary": "#460078",
+  "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.violet,
+  onPrimary: '#FDFBFF',
+  secondary: '#460078',
+  onSecondary: palette.white,
+  defaultSurface: '#FDFBFF',
+  highlightedSurface: '#F1E9FB',
+  pressedSurface: '#380060',
+
+  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,