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

package/src/components/Toolbar/__tests__/__snapshots__/ToolbarItem.spec.tsx.snap

@@ -52,7 +52,7 @@ exports[`ToolbarItems renders correctly when disabled 1`] = `
         [
           {
             "alignItems": "center",
-            "backgroundColor": "#ece8ef",
+            "backgroundColor": "#f1e9fb",
             "borderRadius": 24,
             "flexDirection": "row",
             "justifyContent": "center",
@@ -364,7 +364,7 @@ exports[`ToolbarItems renders correctly when intent is primary, icon is ai-outli
         [
           {
             "alignItems": "center",
-            "backgroundColor": "#ece8ef",
+            "backgroundColor": "#f1e9fb",
             "borderRadius": 24,
             "flexDirection": "row",
             "justifyContent": "center",
@@ -379,7 +379,7 @@ exports[`ToolbarItems renders correctly when intent is primary, icon is ai-outli
         style={
           [
             {
-              "color": "#401960",
+              "color": "#460078",
               "fontSize": 24,
             },
             undefined,
@@ -395,7 +395,7 @@ exports[`ToolbarItems renders correctly when intent is primary, icon is ai-outli
         style={
           [
             {
-              "color": "#401960",
+              "color": "#460078",
               "fontFamily": "BeVietnamPro-SemiBold",
               "fontSize": 16,
               "letterSpacing": 0.24,
@@ -492,7 +492,7 @@ exports[`ToolbarItems renders correctly when intent is primary, icon is ai-outli
         [
           {
             "alignItems": "center",
-            "backgroundColor": "#ece8ef",
+            "backgroundColor": "#f1e9fb",
             "borderRadius": 24,
             "flexDirection": "row",
             "justifyContent": "center",
@@ -620,7 +620,7 @@ exports[`ToolbarItems renders correctly when intent is primary, icon is ai-outli
         [
           {
             "alignItems": "center",
-            "backgroundColor": "#ece8ef",
+            "backgroundColor": "#f1e9fb",
             "borderRadius": 24,
             "flexDirection": "row",
             "justifyContent": "center",
@@ -635,7 +635,7 @@ exports[`ToolbarItems renders correctly when intent is primary, icon is ai-outli
         style={
           [
             {
-              "color": "#401960",
+              "color": "#460078",
               "fontSize": 24,
             },
             undefined,

package/src/components/Typography/Body/__tests__/__snapshots__/StyledBody.tsx.snap

@@ -212,7 +212,7 @@ exports[`StyledBody has primary intent style 1`] = `
     style={
       [
         {
-          "color": "#401960",
+          "color": "#460078",
           "fontFamily": "BeVietnamPro-Regular",
           "fontSize": 16,
           "letterSpacing": 0.48,

package/src/components/Typography/Body/__tests__/__snapshots__/index.spec.tsx.snap

@@ -319,7 +319,7 @@ exports[`Body has primary intent style 1`] = `
     style={
       [
         {
-          "color": "#401960",
+          "color": "#460078",
           "fontFamily": "BeVietnamPro-Regular",
           "fontSize": 16,
           "letterSpacing": 0.48,
@@ -574,7 +574,7 @@ exports[`Body has secondary intent style 1`] = `
     style={
       [
         {
-          "color": "#795e90",
+          "color": "#B382FD",
           "fontFamily": "BeVietnamPro-Regular",
           "fontSize": 16,
           "letterSpacing": 0.48,

package/src/components/Typography/Caption/__tests__/__snapshots__/StyledCaption.spec.tsx.snap

@@ -208,7 +208,7 @@ exports[`StyledCaption has primary intent style 1`] = `
     style={
       [
         {
-          "color": "#401960",
+          "color": "#460078",
           "fontFamily": "BeVietnamPro-Regular",
           "fontSize": 12,
           "letterSpacing": 0.36,

package/src/components/Typography/Caption/__tests__/__snapshots__/index.spec.tsx.snap

@@ -313,7 +313,7 @@ exports[`Caption has primary intent style 1`] = `
     style={
       [
         {
-          "color": "#401960",
+          "color": "#460078",
           "fontFamily": "BeVietnamPro-Regular",
           "fontSize": 12,
           "letterSpacing": 0.36,
@@ -413,7 +413,7 @@ exports[`Caption has secondary intent style 1`] = `
     style={
       [
         {
-          "color": "#795e90",
+          "color": "#B382FD",
           "fontFamily": "BeVietnamPro-Regular",
           "fontSize": 12,
           "letterSpacing": 0.36,

package/src/components/Typography/Label/__tests__/__snapshots__/StyledLabel.tsx.snap

@@ -200,7 +200,7 @@ exports[`StyledLabel has primary intent style 1`] = `
     style={
       [
         {
-          "color": "#401960",
+          "color": "#460078",
           "fontSize": 10,
           "letterSpacing": 0,
           "lineHeight": 14,

package/src/components/Typography/Label/__tests__/__snapshots__/index.spec.tsx.snap

@@ -301,7 +301,7 @@ exports[`Label has primary intent style 1`] = `
     style={
       [
         {
-          "color": "#401960",
+          "color": "#460078",
           "fontSize": 10,
           "letterSpacing": 0,
           "lineHeight": 14,
@@ -349,7 +349,7 @@ exports[`Label has secondary intent style 1`] = `
     style={
       [
         {
-          "color": "#795e90",
+          "color": "#B382FD",
           "fontSize": 10,
           "letterSpacing": 0,
           "lineHeight": 14,

package/src/components/Typography/Text/__tests__/__snapshots__/StyledText.spec.tsx.snap

@@ -471,7 +471,7 @@ exports[`StyledText has primary intent style 1`] = `
     style={
       [
         {
-          "color": "#401960",
+          "color": "#460078",
           "fontFamily": "BeVietnamPro-Regular",
           "fontSize": 14,
           "letterSpacing": 0.42,

package/src/components/Typography/Title/__tests__/__snapshots__/StyledTitle.tsx.snap

@@ -812,7 +812,7 @@ exports[`StyledTitle has primary intent style 1`] = `
     style={
       [
         {
-          "color": "#401960",
+          "color": "#460078",
           "fontFamily": "BeVietnamPro-Regular",
           "fontSize": 18,
           "letterSpacing": 0.48,

package/src/components/Typography/Title/__tests__/__snapshots__/index.spec.tsx.snap

@@ -931,7 +931,7 @@ exports[`Title has primary intent style 1`] = `
     style={
       [
         {
-          "color": "#401960",
+          "color": "#460078",
           "fontFamily": "BeVietnamPro-Regular",
           "fontSize": 42,
           "letterSpacing": 0,
@@ -982,7 +982,7 @@ exports[`Title has secondary intent style 1`] = `
     style={
       [
         {
-          "color": "#795e90",
+          "color": "#B382FD",
           "fontFamily": "BeVietnamPro-Regular",
           "fontSize": 42,
           "letterSpacing": 0,

package/src/index.ts

@@ -3,6 +3,7 @@ import theme, {
   ThemeProvider,
   useTheme,
   swagSystemPalette,
+  swagLightSystemPalette,
   swagDarkSystemPalette,
   workSystemPalette,
   jobsSystemPalette,
@@ -77,6 +78,7 @@ export {
   ThemeSwitcher,
   withTheme,
   swagSystemPalette,
+  swagLightSystemPalette,
   swagDarkSystemPalette,
   workSystemPalette,
   jobsSystemPalette,

package/src/theme/ThemeSwitcher.tsx

@@ -9,13 +9,21 @@ import {
   walletSystemPalette,
   eBensSystemPalette,
   swagDarkSystemPalette,
+  swagLightSystemPalette,
 } from './global';
 import ThemeProvider from './ThemeProvider';
 
-type ThemeName = 'swag' | 'swagDark' | 'work' | 'jobs' | 'wallet' | 'eBens';
+type ThemeName =
+  | 'swag'
+  | 'swagLight'
+  | 'swagDark'
+  | 'work'
+  | 'jobs'
+  | 'wallet'
+  | 'eBens';
 
 const ThemeSwitcher = ({
-  name = 'swag',
+  name = 'swagLight',
   children,
 }: {
   name?: ThemeName;
@@ -35,6 +43,8 @@ const ThemeSwitcher = ({
         return getTheme(defaultScale, eBensSystemPalette);
       case 'swagDark':
         return getTheme(defaultScale, swagDarkSystemPalette);
+      case 'swagLight':
+        return getTheme(defaultScale, swagLightSystemPalette);
     }
   }, [name]);
   return <ThemeProvider theme={theme}>{children}</ThemeProvider>;

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

@@ -19,12 +19,21 @@ exports[`theme returns correct theme object 1`] = `
         "base": 1,
       },
       "colors": {
+        "backgrounds": {
+          "error": "#fcebe7",
+          "info": "#ecf0ff",
+          "notification": "#ffffff",
+          "success": "#f0fef4",
+          "warning": "#fff6eb",
+        },
         "divider": "#e8e9ea",
-        "error": "#f46363",
-        "info": "#b5c3fd",
-        "notification": "#ffffff",
-        "success": "#5ace7d",
-        "warning": "#ffbe71",
+        "texts": {
+          "error": "#cb300a",
+          "info": "#355bfb",
+          "notification": "#001f23",
+          "success": "#017d6d",
+          "warning": "#ac5d00",
+        },
       },
       "radii": {
         "default": 16,
@@ -41,7 +50,7 @@ exports[`theme returns correct theme object 1`] = `
     },
     "attachment": {
       "colors": {
-        "highlightedBackground": "#ece8ef",
+        "highlightedBackground": "#f1e9fb",
       },
       "radii": {
         "container": 8,
@@ -62,7 +71,7 @@ exports[`theme returns correct theme object 1`] = `
       "colors": {
         "danger": "#f46363",
         "info": "#b5c3fd",
-        "primary": "#401960",
+        "primary": "#460078",
         "success": "#5ace7d",
         "text": "#ffffff",
         "warning": "#ffbe71",
@@ -111,7 +120,7 @@ exports[`theme returns correct theme object 1`] = `
         "archived": "#606065",
         "danger": "#cb300a",
         "info": "#355bfb",
-        "primary": "#401960",
+        "primary": "#460078",
         "success": "#017d6d",
         "text": "#ffffff",
         "warning": "#ac5d00",
@@ -140,7 +149,7 @@ exports[`theme returns correct theme object 1`] = `
     "bottomNavigation": {
       "colors": {
         "background": "#ffffff",
-        "shadow": "#401960",
+        "shadow": "#460078",
       },
       "shadows": {
         "elevation": 10,
@@ -200,18 +209,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": "#460078",
+        "secondary": "#B382FD",
+        "textLoadingBackground": "#f1e9fb",
         "utilityBackground": "#ffffff",
       },
       "fontSize": {
@@ -246,7 +255,7 @@ exports[`theme returns correct theme object 1`] = `
         "background": "#ffffff",
         "border": "#001f23",
         "inverted": "#ffffff",
-        "primary": "#401960",
+        "primary": "#460078",
       },
       "radii": {
         "default": 999,
@@ -271,10 +280,10 @@ exports[`theme returns correct theme object 1`] = `
       "colors": {
         "archived": "#abacaf",
         "danger": "#f46363",
-        "dataCardIndicator": "#401960",
+        "dataCardIndicator": "#460078",
         "info": "#b5c3fd",
         "neutral": "#f6f6f7",
-        "primary": "#401960",
+        "primary": "#460078",
         "success": "#5ace7d",
         "warning": "#ffbe71",
       },
@@ -287,7 +296,7 @@ exports[`theme returns correct theme object 1`] = `
     },
     "cardCarousel": {
       "colors": {
-        "carouselItemBackground": "#f6f6f7",
+        "carouselItemBackground": "#FDFBFF",
       },
       "radii": {
         "card": 8,
@@ -351,7 +360,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 +469,7 @@ exports[`theme returns correct theme object 1`] = `
     "error": {
       "colors": {
         "description": "#4d6265",
-        "fullScreenBackground": "#ccd2d3",
+        "fullScreenBackground": "#DDC8F5",
         "inPageBackground": "#f6f6f7",
         "title": "#001f23",
       },
@@ -493,15 +502,15 @@ exports[`theme returns correct theme object 1`] = `
     },
     "fab": {
       "colors": {
-        "actionItemBackground": "#795e90",
-        "actionItemPressedBackground": "#33144d",
-        "actionItemText": "#ffffff",
+        "actionItemBackground": "#000000",
+        "actionItemPressedBackground": "#000000",
+        "actionItemText": "#FDFBFF",
         "backdropBackground": "#000000",
-        "buttonActiveBackground": "#33144d",
-        "buttonBackground": "#401960",
-        "buttonPressedBackground": "#33144d",
-        "icon": "#ffffff",
-        "titleText": "#ffffff",
+        "buttonActiveBackground": "#000000",
+        "buttonBackground": "#000000",
+        "buttonPressedBackground": "#000000",
+        "icon": "#FDFBFF",
+        "titleText": "#FDFBFF",
       },
       "fontSizes": {
         "actionItemText": 16,
@@ -552,8 +561,8 @@ exports[`theme returns correct theme object 1`] = `
         "disabledText": "#bfc1c5",
         "info": "#b5c3fd",
         "invertedText": "#ffffff",
-        "primary": "#401960",
-        "secondary": "#795e90",
+        "primary": "#460078",
+        "secondary": "#B382FD",
         "success": "#5ace7d",
         "text": "#001f23",
         "warning": "#ffbe71",
@@ -574,7 +583,7 @@ exports[`theme returns correct theme object 1`] = `
     },
     "list": {
       "colors": {
-        "checkedListItemContainerBackground": "#ece8ef",
+        "checkedListItemContainerBackground": "#f1e9fb",
         "leadingStatus": {
           "archived": "#abacaf",
           "danger": "#f46363",
@@ -618,7 +627,7 @@ exports[`theme returns correct theme object 1`] = `
     },
     "pageControl": {
       "colors": {
-        "paginatorBackgroundColor": "#401960",
+        "paginatorBackgroundColor": "#460078",
       },
       "radii": {
         "paginatorBorderRadius": 999,
@@ -681,7 +690,7 @@ exports[`theme returns correct theme object 1`] = `
           "dangerInverted": "#ffffff",
           "info": "#b5c3fd",
           "infoInverted": "#ffffff",
-          "primary": "#401960",
+          "primary": "#460078",
           "primaryInverted": "#ffffff",
           "success": "#5ace7d",
           "successInverted": "#ffffff",
@@ -696,7 +705,7 @@ exports[`theme returns correct theme object 1`] = `
           "info": "#e8e9ea",
           "infoInverted": "#c4cffd",
           "primary": "#e8e9ea",
-          "primaryInverted": "#664780",
+          "primaryInverted": "#6b3393",
           "success": "#e8e9ea",
           "successInverted": "#7bd897",
           "warning": "#e8e9ea",
@@ -717,8 +726,8 @@ exports[`theme returns correct theme object 1`] = `
         "circle": 2,
       },
       "colors": {
-        "checked": "#ece8ef",
-        "circle": "#401960",
+        "checked": "#f1e9fb",
+        "circle": "#460078",
         "intents": {
           "dark": "#f6f6f7",
           "light": "#ffffff",
@@ -736,7 +745,7 @@ exports[`theme returns correct theme object 1`] = `
     },
     "rate": {
       "colors": {
-        "iconStroke": "#401960",
+        "iconStroke": "#460078",
       },
       "spaces": {
         "iconWrapperMarginRight": 4,
@@ -745,7 +754,7 @@ exports[`theme returns correct theme object 1`] = `
     },
     "refreshControl": {
       "colors": {
-        "indicator": "#401960",
+        "indicator": "#460078",
       },
     },
     "richTextEditor": {
@@ -753,7 +762,7 @@ exports[`theme returns correct theme object 1`] = `
         "text": "#001f23",
         "toolbarBackgroundColor": "#f6f6f7",
         "toolbarBorderColor": "#e8e9ea",
-        "toolbarButtonSelectedBackground": "#ece8ef",
+        "toolbarButtonSelectedBackground": "#f1e9fb",
       },
       "fontSizes": {
         "editor": 14,
@@ -777,7 +786,7 @@ exports[`theme returns correct theme object 1`] = `
     "sectionHeading": {
       "colors": {
         "background": "#f6f6f7",
-        "backgroundSmall": "#ccd2d3",
+        "backgroundSmall": "#DDC8F5",
       },
       "space": {
         "headingHorizontalPadding": 16,
@@ -819,16 +828,16 @@ exports[`theme returns correct theme object 1`] = `
     },
     "slider": {
       "colors": {
-        "maximumTrackTint": "#ece8ef",
-        "minimumTrackTint": "#401960",
-        "thumbTint": "#401960",
+        "maximumTrackTint": "#f1e9fb",
+        "minimumTrackTint": "#460078",
+        "thumbTint": "#460078",
       },
     },
     "spinner": {
       "colors": {
         "dot": {
-          "inverted": "#ffffff",
-          "primary": "#401960",
+          "inverted": "#FDFBFF",
+          "primary": "#460078",
         },
       },
       "radii": {
@@ -852,7 +861,7 @@ exports[`theme returns correct theme object 1`] = `
     "success": {
       "colors": {
         "description": "#4d6265",
-        "fullScreenBackground": "#ccd2d3",
+        "fullScreenBackground": "#DDC8F5",
         "inPageBackground": "#f6f6f7",
         "title": "#001f23",
       },
@@ -883,7 +892,7 @@ exports[`theme returns correct theme object 1`] = `
       "colors": {
         "danger": "#f46363",
         "defaultContainerBackground": "#ffffff",
-        "primary": "#401960",
+        "primary": "#460078",
         "success": "#5ace7d",
       },
       "radii": {
@@ -896,14 +905,14 @@ exports[`theme returns correct theme object 1`] = `
     "switch": {
       "colors": {
         "backgroundColors": {
-          "checked": "#401960",
-          "disabled-checked": "#ece8ef",
+          "checked": "#460078",
+          "disabled-checked": "#f1e9fb",
           "disabled-unchecked": "#bfc1c5",
           "unchecked": "#808f91",
         },
         "selector": {
           "background": "#ffffff",
-          "textBackground": "#ccd2d3",
+          "textBackground": "#DDC8F5",
         },
         "thumb": "#ffffff",
       },
@@ -935,10 +944,10 @@ exports[`theme returns correct theme object 1`] = `
       },
       "colors": {
         "active": "#001f23",
-        "activeBackground": "#ccd2d3",
+        "activeBackground": "#DDC8F5",
         "headerBottom": "#e8e9ea",
         "inactive": "#001f23",
-        "indicator": "#401960",
+        "indicator": "#460078",
         "text": "#001f23",
       },
       "radii": {
@@ -968,8 +977,8 @@ exports[`theme returns correct theme object 1`] = `
         "dangerBackground": "#fcebe7",
         "info": "#355bfb",
         "infoBackground": "#ecf0ff",
-        "primary": "#401960",
-        "primaryBackground": "#ece8ef",
+        "primary": "#460078",
+        "primaryBackground": "#f1e9fb",
         "success": "#017d6d",
         "successBackground": "#f0fef4",
         "text": "#001f23",
@@ -1131,10 +1140,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": "#460078",
+        "secondary": "#B382FD",
         "success": "#5ace7d",
       },
       "radii": {
@@ -1158,8 +1167,8 @@ exports[`theme returns correct theme object 1`] = `
         "disabled": "#bfc1c5",
         "info": "#355bfb",
         "inverted": "#ffffff",
-        "primary": "#401960",
-        "secondary": "#795e90",
+        "primary": "#460078",
+        "secondary": "#B382FD",
         "subdued": "#4d6265",
         "success": "#5ace7d",
         "warning": "#ffbe71",
@@ -1332,15 +1341,15 @@ exports[`theme returns correct theme object 1`] = `
     "archived": "#abacaf",
     "archivedSurface": "#dadbde",
     "darkGlobalSurface": "#001f23",
-    "decorativePrimary": "#ffffff",
-    "decorativePrimarySurface": "#ccd2d3",
+    "decorativePrimary": "#FDFBFF",
+    "decorativePrimarySurface": "#DDC8F5",
     "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 +1366,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": "#460078",
     "primaryOutline": "#001f23",
-    "secondary": "#795e90",
+    "secondary": "#B382FD",
     "secondaryOutline": "#e8e9ea",
     "success": "#5ace7d",
     "successSurface": "#f0fef4",

package/src/theme/components/alert.ts

@@ -2,11 +2,20 @@ import type { GlobalTheme } from '../global';
 
 const getAlertTheme = (theme: GlobalTheme) => {
   const colors = {
-    success: theme.colors.success,
-    warning: theme.colors.warning,
-    error: theme.colors.error,
-    info: theme.colors.info,
-    notification: theme.colors.defaultGlobalSurface,
+    backgrounds: {
+      success: theme.colors.successSurface,
+      warning: theme.colors.warningSurface,
+      error: theme.colors.errorSurface,
+      info: theme.colors.infoSurface,
+      notification: theme.colors.defaultGlobalSurface,
+    },
+    texts: {
+      success: theme.colors.onSuccessSurface,
+      warning: theme.colors.onWarningSurface,
+      error: theme.colors.onErrorSurface,
+      info: theme.colors.onInfoSurface,
+      notification: theme.colors.onDefaultGlobalSurface,
+    },
     divider: theme.colors.secondaryOutline,
   };