@hero-design/rn 8.89.0 → 8.91.0-alpha.0

package/src/theme/components/card.ts

@@ -4,12 +4,14 @@ const getCardTheme = (theme: GlobalTheme) => {
   const colors = {
     dataCardIndicator: theme.colors.primary,
     primary: theme.colors.primary,
+    secondary: theme.colors.highlightedSurface,
     info: theme.colors.info,
     success: theme.colors.success,
     warning: theme.colors.warning,
     danger: theme.colors.error,
     archived: theme.colors.archived,
     neutral: theme.colors.neutralGlobalSurface,
+    dataCardBackground: theme.colors.neutralGlobalSurface,
   };
 
   const sizes = {

package/src/theme/components/error.ts

@@ -20,7 +20,7 @@ const getErrorTheme = (theme: GlobalTheme) => {
   const colors = {
     title: theme.colors.onDefaultGlobalSurface,
     description: theme.colors.mutedOnDefaultGlobalSurface,
-    fullScreenBackground: theme.colors.decorativePrimarySurface,
+    fullScreenBackground: theme.colors.defaultGlobalSurface,
     inPageBackground: theme.colors.neutralGlobalSurface,
   };
 

package/src/theme/components/icon.ts

@@ -15,6 +15,7 @@ const getIconTheme = (theme: GlobalTheme) => {
   };
 
   const sizes = {
+    xxxsmall: theme.fontSizes.small,
     xsmall: theme.fontSizes.large,
     small: theme.fontSizes.xxlarge,
     medium: theme.fontSizes.xxxlarge,

package/src/theme/components/list.ts

@@ -2,7 +2,7 @@ import type { GlobalTheme } from '../global';
 
 const getListTheme = (theme: GlobalTheme) => {
   const colors = {
-    checkedListItemContainerBackground: theme.colors.highlightedSurface,
+    checkedListItemContainerBackground: theme.colors.decorativeSecondarySurface,
     listItemContainerBackground: theme.colors.defaultGlobalSurface,
     leadingStatus: {
       danger: theme.colors.error,

package/src/theme/components/success.ts

@@ -20,7 +20,7 @@ const getSuccessTheme = (theme: GlobalTheme) => {
   const colors = {
     title: theme.colors.onDefaultGlobalSurface,
     description: theme.colors.mutedOnDefaultGlobalSurface,
-    fullScreenBackground: theme.colors.decorativePrimarySurface,
+    fullScreenBackground: theme.colors.defaultGlobalSurface,
     inPageBackground: theme.colors.neutralGlobalSurface,
   };
 

package/src/theme/components/toolbar.ts

@@ -9,8 +9,7 @@ const getToolbarTheme = (theme: GlobalTheme) => {
     secondary: theme.colors.mutedOnDefaultGlobalSurface,
     info: theme.colors.info,
     success: theme.colors.success,
-    danger: theme.colors.warning,
-    error: theme.colors.error,
+    danger: theme.colors.onErrorSurface,
     disabled: theme.colors.disabledOnDefaultGlobalSurface,
     iconButtonBackground: theme.colors.highlightedSurface,
     inputContainerBackground: theme.colors.neutralGlobalSurface,

package/src/theme/getTheme.ts

@@ -52,8 +52,11 @@ import getSearchTheme from './components/search';
 import getMapPinTheme from './components/mapPin';
 import getFloatingIslandTheme from './components/floatingIsland';
 import getAppCueTheme from './components/appCue';
+import { ThemeMode } from './global/colors/types';
 
 type Theme = GlobalTheme & {
+  themeMode?: ThemeMode;
+} & {
   __hd__: {
     accordion: ReturnType<typeof getAccordionTheme>;
     alert: ReturnType<typeof getAlertTheme>;
@@ -114,6 +117,7 @@ const getTheme = (
 ): Theme => {
   const globalTheme = getGlobalTheme(scale, systemPallete);
   return {
+    themeMode: systemPallete.themeMode,
     ...globalTheme,
     __hd__: {
       accordion: getAccordionTheme(globalTheme),

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

@@ -42,6 +42,7 @@ exports[`swagDark returns correct theme object 1`] = `
   "secondaryOutline": "#193539",
   "success": "#017162",
   "successSurface": "#004e48",
+  "themeMode": "dark",
   "warning": "#a56822",
   "warningSurface": "#4d4628",
 }

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

@@ -7,6 +7,8 @@ exports[`swagDark returns correct theme object 1`] = `
   "darkGlobalSurface": "#001f23",
   "decorativePrimary": "#fdfbff",
   "decorativePrimarySurface": "#dacce4",
+  "decorativeSecondary": "#fdfbff",
+  "decorativeSecondarySurface": "#f0e6ff",
   "defaultGlobalSurface": "#ffffff",
   "defaultSurface": "#fdfbff",
   "disabledOnDefaultGlobalSurface": "#bfc1c5",

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

@@ -0,0 +1,63 @@
+import { SystemPalette } from './types';
+
+const ehWorkDarkSystemPalette: SystemPalette = {
+  black: '#000000',
+  white: '#ffffff',
+  // Surface
+  defaultGlobalSurface: '#27272A',
+  neutralGlobalSurface: '#121214',
+  darkGlobalSurface: '#fcfbff',
+  overlayGlobalSurface: '#ffffff',
+  // On Surface
+  onDefaultGlobalSurface: '#ffffff',
+  mutedOnDefaultGlobalSurface: '#a9a9b2',
+  inactiveOnDefaultGlobalSurface: '#71717a',
+  disabledOnDefaultGlobalSurface: '#52525b',
+  onDarkGlobalSurface: '#121214',
+  // Outline:
+  primaryOutline: '#a9a9b2',
+  secondaryOutline: '#3f3f46',
+  inactiveOutline: '#71717a',
+  disabledOutline: '#52525b',
+  // Archived:
+  archivedSurface: '#52525b',
+  mutedArchived: '#3f3f46',
+  archived: '#71717a',
+  onArchivedSurface: '#d4d4d8',
+  // Error:
+  errorSurface: '#7a1d06',
+  mutedError: '#9b2508',
+  error: '#bd2d09',
+  onErrorSurface: '#fcaea5',
+  // Warning:
+  warningSurface: '#963e03',
+  mutedWarning: '#c35004',
+  warning: '#dc6204',
+  onWarningSurface: '#ffe7bf',
+  // Success:
+  successSurface: '#00483e',
+  mutedSuccess: '#016256',
+  success: '#017d6d',
+  onSuccessSurface: '#6ee7d7',
+  // Info:
+  infoSurface: '#004a61',
+  mutedInfo: '#006585',
+  info: '#007da3',
+  onInfoSurface: '#70ddff',
+  // Brand:
+  primary: '#cdacfe',
+  onPrimary: '#280541',
+  secondary: '#7622d7',
+  onSecondary: '#ffffff',
+  defaultSurface: '#280541',
+  highlightedSurface: '#460078',
+  pressedSurface: '#9a58fc',
+  decorativePrimary: '#280541',
+  decorativePrimarySurface: '#74409a',
+  decorativeSecondary: '#280541',
+  decorativeSecondarySurface: '#4c1d95',
+  // Theme Mode
+  themeMode: 'dark',
+};
+
+export default ehWorkDarkSystemPalette;

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

@@ -20,6 +20,8 @@ const swagDarkSystemPalette: SystemPalette = {
   ...globalDarkPalette,
   // Brand
   ...swagDarkBrandSystemPalette,
+  // Theme Mode
+  themeMode: 'dark',
 };
 
 export default swagDarkSystemPalette;

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

@@ -12,6 +12,8 @@ const swagBrandSystemPallete: BrandSystemPalette = {
   pressedSurface: '#380060',
   decorativePrimary: '#fdfbff',
   decorativePrimarySurface: '#dacce4',
+  decorativeSecondary: '#fdfbff',
+  decorativeSecondarySurface: '#f0e6ff',
 };
 
 const swagSystemPalette: SystemPalette = {

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

@@ -39,6 +39,9 @@ export type GlobalSystemPalette = {
   archivedSurface: string;
   onArchivedSurface: string;
   // End of Updated 14 / Nov / 22
+
+  black?: string;
+  white?: string;
 };
 
 export type BrandSystemPalette = {
@@ -61,4 +64,8 @@ export type BrandSystemPalette = {
   decorativeSecondarySurface?: string;
 };
 
-export type SystemPalette = GlobalSystemPalette & BrandSystemPalette;
+export type ThemeMode = 'light' | 'dark';
+export type SystemPalette = GlobalSystemPalette &
+  BrandSystemPalette & {
+    themeMode?: ThemeMode;
+  };

package/src/theme/global/index.ts

@@ -7,6 +7,7 @@ import workSystemPalette from './colors/work';
 import jobsSystemPalette from './colors/jobs';
 import walletSystemPalette from './colors/wallet';
 import eBensSystemPalette from './colors/eBens';
+import ehWorkDarkSystemPalette from './colors/ehWorkDark';
 
 import { getFonts, getFontSizes, getLineHeights } from './typography';
 import { getSpace } from './space';
@@ -56,4 +57,5 @@ export {
   jobsSystemPalette,
   walletSystemPalette,
   eBensSystemPalette,
+  ehWorkDarkSystemPalette,
 };

package/src/theme/index.ts

@@ -10,6 +10,7 @@ import {
   jobsSystemPalette,
   walletSystemPalette,
   eBensSystemPalette,
+  ehWorkDarkSystemPalette,
 } from './global';
 
 import type { Theme } from './getTheme';
@@ -32,6 +33,7 @@ export {
   jobsSystemPalette,
   walletSystemPalette,
   eBensSystemPalette,
+  ehWorkDarkSystemPalette,
 };
 
 export default defaultTheme;