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

package/src/theme/components/search.ts

@@ -0,0 +1,56 @@
+import type { GlobalTheme } from '../global';
+
+const getSearchTheme = (theme: GlobalTheme) => {
+  const colors = {
+    containerBackground: theme.colors.neutralGlobalSurface,
+    surfixBackground: theme.colors.defaultGlobalSurface,
+    text: theme.colors.onDefaultGlobalSurface,
+    borders: theme.colors.primaryOutline,
+  };
+
+  const space = {
+    containerHorizontalPadding: theme.space.small,
+    containerVerticalPadding: theme.space.small,
+    inputHorizontalMargin: theme.space.small,
+    prefixHorizontalPadding: theme.space.xsmall,
+    surfixPadding: theme.space.small,
+    badgeTop: -theme.space.xxsmall,
+    badgeRight: -theme.space.xxsmall,
+  };
+
+  const fonts = {
+    text: theme.fonts.neutral.regular,
+  };
+
+  const fontSizes = {
+    text: theme.fontSizes.large,
+  };
+
+  const borderWidths = {
+    container: {
+      normal: theme.borderWidths.base,
+      focused: theme.borderWidths.medium,
+    },
+  };
+
+  const radii = {
+    container: theme.radii.rounded,
+    surfix: theme.radii.rounded,
+  };
+
+  const sizes = {
+    surfixSize: theme.sizes.xxlarge,
+  };
+
+  return {
+    colors,
+    space,
+    fonts,
+    fontSizes,
+    borderWidths,
+    radii,
+    sizes,
+  };
+};
+
+export default getSearchTheme;

package/src/theme/getTheme.ts

@@ -1,4 +1,4 @@
-import { getGlobalTheme, defaultScale, swagLightSystemPalette } from './global';
+import { getGlobalTheme, defaultScale, swagSystemPalette } from './global';
 
 import getAccordionTheme from './components/accordion';
 import getAlertTheme from './components/alert';
@@ -48,6 +48,7 @@ import getToolbarTheme from './components/toolbar';
 import getTypographyTheme from './components/typography';
 
 import type { GlobalTheme, Scale, SystemPalette } from './global';
+import getSearchTheme from './components/search';
 
 type Theme = GlobalTheme & {
   __hd__: {
@@ -82,6 +83,7 @@ type Theme = GlobalTheme & {
     rate: ReturnType<typeof getRateTheme>;
     refreshControl: ReturnType<typeof getRefreshControlTheme>;
     richTextEditor: ReturnType<typeof getRichTextEditorTheme>;
+    search: ReturnType<typeof getSearchTheme>;
     sectionHeading: ReturnType<typeof getSectionHeadingTheme>;
     select: ReturnType<typeof getSelectTheme>;
     skeleton: ReturnType<typeof getSkeletonTheme>;
@@ -102,7 +104,7 @@ type Theme = GlobalTheme & {
 
 const getTheme = (
   scale: Scale = defaultScale,
-  systemPallete: SystemPalette = swagLightSystemPalette
+  systemPallete: SystemPalette = swagSystemPalette
 ): Theme => {
   const globalTheme = getGlobalTheme(scale, systemPallete);
   return {
@@ -139,6 +141,7 @@ const getTheme = (
       rate: getRateTheme(globalTheme),
       refreshControl: getRefreshControlTheme(globalTheme),
       richTextEditor: getRichTextEditorTheme(globalTheme),
+      search: getSearchTheme(globalTheme),
       sectionHeading: getSectionHeadingTheme(globalTheme),
       select: getSelectTheme(globalTheme),
       skeleton: getSkeletonTheme(globalTheme),

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

@@ -5,15 +5,15 @@ 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",
+  "highlightedSurface": "#f1e9fb",
   "inactiveOnDefaultGlobalSurface": "#808f91",
   "inactiveOutline": "#808f91",
   "info": "#b5c3fd",
@@ -30,15 +30,15 @@ exports[`swagDark returns correct theme object 1`] = `
   "onDefaultGlobalSurface": "#001f23",
   "onErrorSurface": "#cb300a",
   "onInfoSurface": "#355bfb",
-  "onPrimary": "#FDFBFF",
+  "onPrimary": "#fdfbff",
   "onSecondary": "#ffffff",
   "onSuccessSurface": "#017d6d",
   "onWarningSurface": "#ac5d00",
   "overlayGlobalSurface": "#000000",
   "pressedSurface": "#380060",
-  "primary": "#7622d7",
+  "primary": "#460078",
   "primaryOutline": "#001f23",
-  "secondary": "#460078",
+  "secondary": "#b382fd",
   "secondaryOutline": "#e8e9ea",
   "success": "#5ace7d",
   "successSurface": "#f0fef4",

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": "#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": "#460078",
+  "onSuccessSurface": "#017d6d",
+  "onWarningSurface": "#ac5d00",
+  "overlayGlobalSurface": "#000000",
+  "pressedSurface": "#380060",
+  "primary": "#460078",
+  "primaryOutline": "#001f23",
+  "secondary": "#40d1ff",
+  "secondaryOutline": "#e8e9ea",
+  "success": "#5ace7d",
+  "successSurface": "#f0fef4",
+  "warning": "#ffbe71",
+  "warningSurface": "#fff6eb",
+}
+`;

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

@@ -3,16 +3,15 @@ import type { SystemPalette, BrandSystemPalette } from './types';
 import globalPalette from './global';
 
 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: '#DDC8F5',
+  decorativePrimary: '#fdfbff',
+  decorativePrimarySurface: '#dacce4',
 };
 
 const swagSystemPalette: SystemPalette = {

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,