@hero-design/rn 8.68.0 → 8.70.0

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

@@ -185,10 +185,13 @@ exports[`theme returns correct theme object 1`] = `
       "colors": {
         "backdrop": "#000000",
         "background": "#ffffff",
+        "floatingHeaderIconBackground": "#dadbde",
         "shadow": "#001f23",
       },
       "radii": {
         "default": 16,
+        "floating": 32,
+        "floatingHeaderIcon": 999,
       },
       "shadows": {
         "elevation": 10,
@@ -201,9 +204,13 @@ exports[`theme returns correct theme object 1`] = `
       },
       "sizes": {
         "closeIcon": 48,
+        "floatingCloseIcon": 12,
       },
       "space": {
         "closeIconMargin": 12,
+        "floatingContentMargin": 16,
+        "floatingHeaderIconPadding": 8,
+        "floatingInnerPadding": 8,
         "footerHorizontalPadding": 12,
         "footerVerticalPadding": 2,
         "headerWrapperHorizontalPadding": 16,
@@ -303,6 +310,7 @@ exports[`theme returns correct theme object 1`] = `
       },
       "radii": {
         "default": 12,
+        "superRound": 24,
       },
       "sizes": {
         "indicatorWidth": 16,
@@ -372,11 +380,11 @@ exports[`theme returns correct theme object 1`] = `
       },
       "colors": {
         "filledBackground": "#ffffff",
-        "outlinedBackground": "transparent",
-        "primaryBackground": "#001f23",
+        "outlinedDefaultBackground": "#ffffff",
+        "outlinedDefaultBorder": "#bfc1c5",
+        "outlinedSelectedBackground": "#e8e9ea",
+        "outlinedSelectedBorder": "#001f23",
         "secondaryBackground": "#ece8ef",
-        "selectedPrimaryText": "#ffffff",
-        "wrapperBorder": "#001f23",
         "wrapperSelectedBorder": "transparent",
       },
       "radii": {
@@ -395,10 +403,12 @@ exports[`theme returns correct theme object 1`] = `
         },
       },
       "sizes": {
-        "wrapperBorder": 1,
+        "outlinedDefaultBorder": 1,
+        "outlinedSelectedBorder": 2,
       },
       "space": {
-        "iconWrapperMarginRight": 8,
+        "iconWrapperHorizontalMargin": 8,
+        "outlinedSelectedMarginTop": -2,
         "wrapperHorizontalPadding": 12,
         "wrapperVerticalPadding": 8,
       },
@@ -725,6 +735,11 @@ exports[`theme returns correct theme object 1`] = `
           "warning": "#e8e9ea",
           "warningInverted": "#ffcb8d",
         },
+        "step": {
+          "complete": "#401960",
+          "current": "#DACCE4",
+          "incomplete": "#dadbde",
+        },
       },
       "radii": {
         "default": 999,
@@ -733,6 +748,10 @@ exports[`theme returns correct theme object 1`] = `
         "barHeight": 8,
         "circleCompletenessHeight": 8,
         "circleDiameter": 72,
+        "stepHeight": 8,
+      },
+      "space": {
+        "stepGap": 4,
       },
     },
     "radio": {

package/src/theme/components/bottomSheet.ts

@@ -5,10 +5,12 @@ const getBottomSheetTheme = (theme: GlobalTheme) => {
     shadow: theme.colors.primaryOutline,
     background: theme.colors.defaultGlobalSurface,
     backdrop: theme.colors.overlayGlobalSurface,
+    floatingHeaderIconBackground: theme.colors.archivedSurface,
   };
 
   const sizes = {
     closeIcon: theme.sizes.xxxlarge,
+    floatingCloseIcon: theme.sizes.smallMedium,
   };
 
   const space = {
@@ -17,6 +19,9 @@ const getBottomSheetTheme = (theme: GlobalTheme) => {
     closeIconMargin: theme.space.smallMedium,
     footerVerticalPadding: theme.space.xxsmall,
     footerHorizontalPadding: theme.space.smallMedium,
+    floatingContentMargin: theme.space.medium,
+    floatingInnerPadding: theme.space.small,
+    floatingHeaderIconPadding: theme.space.small,
   };
 
   const shadows = {
@@ -28,6 +33,8 @@ const getBottomSheetTheme = (theme: GlobalTheme) => {
 
   const radii = {
     default: theme.radii.xlarge,
+    floating: theme.radii['5xlarge'],
+    floatingHeaderIcon: theme.radii.rounded,
   };
 
   return { colors, shadows, radii, sizes, space };

package/src/theme/components/card.ts

@@ -18,6 +18,7 @@ const getCardTheme = (theme: GlobalTheme) => {
 
   const radii = {
     default: theme.radii.large,
+    superRound: theme.radii.xxxlarge,
   };
 
   return { colors, sizes, radii };

package/src/theme/components/chip.ts

@@ -2,23 +2,25 @@ import type { GlobalTheme } from '../global';
 
 const getChipTheme = (theme: GlobalTheme) => {
   const colors = {
-    primaryBackground: theme.colors.darkGlobalSurface,
     secondaryBackground: theme.colors.highlightedSurface,
     filledBackground: theme.colors.defaultGlobalSurface,
-    outlinedBackground: 'transparent',
-    wrapperBorder: theme.colors.primaryOutline,
     wrapperSelectedBorder: 'transparent',
-    selectedPrimaryText: theme.colors.defaultGlobalSurface,
+    outlinedDefaultBackground: theme.colors.defaultGlobalSurface,
+    outlinedSelectedBackground: theme.colors.secondaryOutline,
+    outlinedSelectedBorder: theme.colors.primaryOutline,
+    outlinedDefaultBorder: theme.colors.disabledOnDefaultGlobalSurface,
   };
 
   const space = {
     wrapperHorizontalPadding: theme.space.smallMedium,
     wrapperVerticalPadding: theme.space.small,
-    iconWrapperMarginRight: theme.space.small,
+    iconWrapperHorizontalMargin: theme.space.small,
+    outlinedSelectedMarginTop: -theme.space.xxsmall,
   };
 
   const sizes = {
-    wrapperBorder: theme.borderWidths.base,
+    outlinedDefaultBorder: theme.borderWidths.base,
+    outlinedSelectedBorder: theme.borderWidths.medium,
   };
 
   const radii = {

package/src/theme/components/progress.ts

@@ -37,19 +37,29 @@ const getProgressTheme = (theme: GlobalTheme) => {
       infoInverted: theme.colors.mutedInfo,
       archivedInverted: theme.colors.mutedArchived,
     },
+    step: {
+      complete: theme.colors.primary,
+      incomplete: theme.colors.archivedSurface,
+      current: '#DACCE4',
+    },
   };
 
   const sizes = {
     circleDiameter: theme.sizes['6xlarge'],
     circleCompletenessHeight: theme.sizes.small,
     barHeight: theme.sizes.small,
+    stepHeight: theme.sizes.small,
   };
 
   const radii = {
     default: theme.radii.rounded,
   };
 
-  return { colors, sizes, radii };
+  const space = {
+    stepGap: theme.space.xsmall,
+  };
+
+  return { colors, sizes, radii, space };
 };
 
 export default getProgressTheme;

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

@@ -5,40 +5,40 @@ exports[`swagDark returns correct theme object 1`] = `
   "archived": "#abacaf",
   "archivedSurface": "#dadbde",
   "darkGlobalSurface": "#001f23",
-  "decorativePrimary": "#FDFBFF",
-  "decorativePrimarySurface": "#B382FD",
+  "decorativePrimary": "#fdfbff",
+  "decorativePrimarySurface": "#dacce4",
   "defaultGlobalSurface": "#ffffff",
-  "defaultSurface": "#FDFBFF",
+  "defaultSurface": "#fdfbff",
   "disabledOnDefaultGlobalSurface": "#bfc1c5",
   "disabledOutline": "#bfc1c5",
   "error": "#f46363",
   "errorSurface": "#fcebe7",
-  "highlightedSurface": "#F1E9FB",
-  "inactiveOnDefaultGlobalSurface": "#808f91",
-  "inactiveOutline": "#808f91",
+  "highlightedSurface": "#f1e9fb",
+  "inactiveOnDefaultGlobalSurface": "#89898a",
+  "inactiveOutline": "#89898a",
   "info": "#b5c3fd",
   "infoSurface": "#ecf0ff",
   "mutedArchived": "#bcbdbf",
   "mutedError": "#f68282",
   "mutedInfo": "#c4cffd",
-  "mutedOnDefaultGlobalSurface": "#4d6265",
+  "mutedOnDefaultGlobalSurface": "#59595b",
   "mutedSuccess": "#7bd897",
   "mutedWarning": "#ffcb8d",
   "neutralGlobalSurface": "#f6f6f7",
   "onArchivedSurface": "#606065",
   "onDarkGlobalSurface": "#ffffff",
-  "onDefaultGlobalSurface": "#001f23",
+  "onDefaultGlobalSurface": "#121214",
   "onErrorSurface": "#cb300a",
   "onInfoSurface": "#355bfb",
-  "onPrimary": "#FDFBFF",
+  "onPrimary": "#fdfbff",
   "onSecondary": "#ffffff",
   "onSuccessSurface": "#017d6d",
   "onWarningSurface": "#ac5d00",
   "overlayGlobalSurface": "#000000",
   "pressedSurface": "#380060",
-  "primary": "#7622d7",
-  "primaryOutline": "#001f23",
-  "secondary": "#460078",
+  "primary": "#460078",
+  "primaryOutline": "#121214",
+  "secondary": "#b382fd",
   "secondaryOutline": "#e8e9ea",
   "success": "#5ace7d",
   "successSurface": "#f0fef4",

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

@@ -0,0 +1,39 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`swagLightGlobal returns correct theme object 1`] = `
+{
+  "archived": "#abacaf",
+  "archivedSurface": "#dadbde",
+  "darkGlobalSurface": "#001f23",
+  "defaultGlobalSurface": "#ffffff",
+  "disabledOnDefaultGlobalSurface": "#bfc1c5",
+  "disabledOutline": "#bfc1c5",
+  "error": "#f46363",
+  "errorSurface": "#fcebe7",
+  "inactiveOnDefaultGlobalSurface": "#89898a",
+  "inactiveOutline": "#89898a",
+  "info": "#b5c3fd",
+  "infoSurface": "#ecf0ff",
+  "mutedArchived": "#bcbdbf",
+  "mutedError": "#f68282",
+  "mutedInfo": "#c4cffd",
+  "mutedOnDefaultGlobalSurface": "#59595b",
+  "mutedSuccess": "#7bd897",
+  "mutedWarning": "#ffcb8d",
+  "neutralGlobalSurface": "#f6f6f7",
+  "onArchivedSurface": "#606065",
+  "onDarkGlobalSurface": "#ffffff",
+  "onDefaultGlobalSurface": "#121214",
+  "onErrorSurface": "#cb300a",
+  "onInfoSurface": "#355bfb",
+  "onSuccessSurface": "#017d6d",
+  "onWarningSurface": "#ac5d00",
+  "overlayGlobalSurface": "#000000",
+  "primaryOutline": "#121214",
+  "secondaryOutline": "#e8e9ea",
+  "success": "#5ace7d",
+  "successSurface": "#f0fef4",
+  "warning": "#ffbe71",
+  "warningSurface": "#fff6eb",
+}
+`;

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

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

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

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

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

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

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

@@ -1,23 +1,22 @@
 import { swagLightPalette as palette } from '@hero-design/colors';
 import type { SystemPalette, BrandSystemPalette } from './types';
-import globalPalette from './global';
+import swagLightGlobalPalette from './swagLightGlobal';
 
 const swagBrandSystemPallete: BrandSystemPalette = {
-  primary: palette.violet,
-  onPrimary: '#FDFBFF',
-  secondary: '#460078',
+  primary: '#460078',
+  onPrimary: '#fdfbff',
+  secondary: '#b382fd',
   onSecondary: palette.white,
-  defaultSurface: '#FDFBFF',
-  highlightedSurface: '#F1E9FB',
+  defaultSurface: '#fdfbff',
+  highlightedSurface: palette.violetLight90,
   pressedSurface: '#380060',
-
-  decorativePrimary: '#FDFBFF',
-  decorativePrimarySurface: '#B382FD',
+  decorativePrimary: '#fdfbff',
+  decorativePrimarySurface: '#dacce4',
 };
 
 const swagSystemPalette: SystemPalette = {
   // Global
-  ...globalPalette,
+  ...swagLightGlobalPalette,
   // Brand
   ...swagBrandSystemPallete,
 };

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

@@ -0,0 +1,14 @@
+import { swagLightPalette as palette } from '@hero-design/colors';
+import type { GlobalSystemPalette } from './types';
+import globalPalette from './global';
+
+const swagLightGlobalPalette: GlobalSystemPalette = {
+  ...globalPalette,
+  onDefaultGlobalSurface: palette.offBlack,
+  mutedOnDefaultGlobalSurface: palette.offBlackLight30,
+  inactiveOnDefaultGlobalSurface: palette.offBlackLight50,
+  primaryOutline: palette.offBlack,
+  inactiveOutline: palette.offBlackLight50,
+};
+
+export default swagLightGlobalPalette;

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

@@ -0,0 +1,11 @@
+import swagLightSystemPalette from './swagLight';
+
+const swagLightJobsSystemPalette = {
+  ...swagLightSystemPalette,
+  secondary: '#40d1ff',
+  onSecondary: '#460078',
+  decorativeSecondary: '#fdfbff',
+  decorativeSecondarySurface: '#d9f6ff',
+};
+
+export default swagLightJobsSystemPalette;

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

@@ -54,6 +54,10 @@ export type BrandSystemPalette = {
   decorativePrimary: string;
   decorativePrimarySurface: string;
   // End of Updated 14 / Nov / 22
+
+  // Updated 19 / Nov / 24
+  decorativeSecondary?: string;
+  decorativeSecondarySurface?: string;
 };
 
 export type SystemPalette = GlobalSystemPalette & BrandSystemPalette;

package/src/theme/global/index.ts

@@ -2,6 +2,7 @@ import { scale as defaultScale } from './scale';
 import swagSystemPalette from './colors/swag';
 import swagDarkSystemPalette from './colors/swagDark';
 import swagLightSystemPalette from './colors/swagLight';
+import swagLightJobsSystemPalette from './colors/swagLightJobs';
 import workSystemPalette from './colors/work';
 import jobsSystemPalette from './colors/jobs';
 import walletSystemPalette from './colors/wallet';
@@ -49,6 +50,7 @@ export {
   defaultScale,
   swagSystemPalette,
   swagLightSystemPalette,
+  swagLightJobsSystemPalette,
   swagDarkSystemPalette,
   workSystemPalette,
   jobsSystemPalette,

package/src/theme/index.ts

@@ -4,6 +4,7 @@ import ThemeSwitcher, { withTheme } from './ThemeSwitcher';
 import {
   swagSystemPalette,
   swagLightSystemPalette,
+  swagLightJobsSystemPalette,
   swagDarkSystemPalette,
   workSystemPalette,
   jobsSystemPalette,
@@ -25,6 +26,7 @@ export {
   useTheme,
   swagSystemPalette,
   swagLightSystemPalette,
+  swagLightJobsSystemPalette,
   swagDarkSystemPalette,
   workSystemPalette,
   jobsSystemPalette,