@hero-design/rn 8.90.1 → 8.91.0

package/.turbo/turbo-build.log

@@ -1,4 +1,4 @@
-(node:2935) ExperimentalWarning: Importing JSON modules is an experimental feature and might change at any time
+(node:3074) ExperimentalWarning: Importing JSON modules is an experimental feature and might change at any time
 (Use `node --trace-warnings ...` to show where the warning was created)
 
 src/index.ts → lib/index.js, es/index.js...
@@ -10,4 +10,4 @@
                                      ~~~~~~~~~~~~~~~~~~~
 
 (!) [plugin node-resolve] preferring built-in module 'events' over local alternative at '/home/runner/work/hero-design/hero-design/node_modules/events/events.js', pass 'preferBuiltins: false' to disable this behavior or 'preferBuiltins: true' to disable this warning.or passing a function to 'preferBuiltins' to provide more fine-grained control over which built-in modules to prefer.
-created lib/index.js, es/index.js in 52.1s
+created lib/index.js, es/index.js in 51.7s

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @hero-design/rn
 
+## 8.91.0
+
+### Minor Changes
+
+- [#3689](https://github.com/Thinkei/hero-design/pull/3689) [`63af7b99c651170d2f681b1c0f4f641f791cd7a3`](https://github.com/Thinkei/hero-design/commit/63af7b99c651170d2f681b1c0f4f641f791cd7a3) Thanks [@vinhphan-eh](https://github.com/vinhphan-eh)! - Add dark theme
+
+### Patch Changes
+
+- [#3687](https://github.com/Thinkei/hero-design/pull/3687) [`76f795675905d2fe908fba08a9bfc9895f47f86c`](https://github.com/Thinkei/hero-design/commit/76f795675905d2fe908fba08a9bfc9895f47f86c) Thanks [@ttkien](https://github.com/ttkien)! - - [Error] update full screen background color to onDefaultGlobalSurface
+
+  - [Toolbar] update danger text color to onErrorSurface
+
+- [#3684](https://github.com/Thinkei/hero-design/pull/3684) [`0642db8dcb345337f74ab3286e11a1c05f7e706e`](https://github.com/Thinkei/hero-design/commit/0642db8dcb345337f74ab3286e11a1c05f7e706e) Thanks [@vinhphan-eh](https://github.com/vinhphan-eh)! - [List] Update background color
+
 ## 8.90.1
 
 ### Patch Changes

package/es/index.js

@@ -2001,7 +2001,9 @@ var swagBrandSystemPallete = {
   highlightedSurface: palette$3.violetLight90,
   pressedSurface: '#380060',
   decorativePrimary: '#fdfbff',
-  decorativePrimarySurface: '#dacce4'
+  decorativePrimarySurface: '#dacce4',
+  decorativeSecondary: '#fdfbff',
+  decorativeSecondarySurface: '#f0e6ff'
 };
 var swagSystemPalette = _objectSpread2(_objectSpread2({}, swagLightGlobalPalette), swagBrandSystemPallete);
 
@@ -2065,6 +2067,66 @@ var eBensBrandSystemPallete = {
 };
 var eBensSystemPalette = _objectSpread2(_objectSpread2({}, swagSystemPalette$1), eBensBrandSystemPallete);
 
+var ehWorkDarkSystemPalette = {
+  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'
+};
+
 var BASE_WIDTH = 390; // Based on iPhone 13's viewport size
 var horizontalScale = function horizontalScale(size) {
   if (Platform.OS === 'web') {
@@ -2941,7 +3003,7 @@ var getErrorTheme = function getErrorTheme(theme) {
   var colors = {
     title: theme.colors.onDefaultGlobalSurface,
     description: theme.colors.mutedOnDefaultGlobalSurface,
-    fullScreenBackground: theme.colors.decorativePrimarySurface,
+    fullScreenBackground: theme.colors.defaultGlobalSurface,
     inPageBackground: theme.colors.neutralGlobalSurface
   };
   var fontSizes = {
@@ -3071,7 +3133,7 @@ var getImageTheme = function getImageTheme(theme) {
 
 var getListTheme = function getListTheme(theme) {
   var colors = {
-    checkedListItemContainerBackground: theme.colors.highlightedSurface,
+    checkedListItemContainerBackground: theme.colors.decorativeSecondarySurface,
     listItemContainerBackground: theme.colors.defaultGlobalSurface,
     leadingStatus: {
       danger: theme.colors.error,
@@ -3810,8 +3872,7 @@ var getToolbarTheme = function getToolbarTheme(theme) {
     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
@@ -5436,6 +5497,8 @@ var ThemeSwitcher = function ThemeSwitcher(_ref) {
         return getTheme$1(scale$1, swagDarkSystemPalette);
       case 'swagLight':
         return getTheme$1(scale$1, swagSystemPalette);
+      case 'ehWorkDark':
+        return getTheme$1(scale$1, ehWorkDarkSystemPalette);
     }
   }, [name]);
   return /*#__PURE__*/React__default.createElement(ThemeProvider, {
@@ -40360,4 +40423,4 @@ var FloatingIsland = function FloatingIsland(_ref2) {
   }));
 };
 
-export { Accordion, Alert, AppCue, Attachment, index$9 as Avatar, Badge$1 as Badge, BottomNavigation, BottomSheet$1 as BottomSheet, Box, CompoundButton as Button, Calendar$1 as Calendar, Card$1 as Card, index$8 as Carousel, Checkbox, Chip, Collapse, ContentNavigator, DatePicker, Divider, index$7 as Drawer, Empty, ErrorComponent as Error, FAB, FlatListWithFAB, FloatingIsland, HeroDesignProvider, Icon, Image, List, index$6 as MapPin, PageControl, PinInput, Portal$1 as Portal, Progress, CompoundRadio as Radio, Rate, RefreshControl, index as RichTextEditor, ScrollViewWithFAB, Search, SectionHeading, SectionListWithFAB, index$4 as Select, Skeleton, Slider, Spinner, Success, index$5 as Swipeable, index$3 as Switch, index$2 as Tabs, Tag, TextInput, ThemeProvider, ThemeSwitcher, TimePicker, Toast, index$1 as Toolbar, Typography, eBensSystemPalette, getTheme$1 as getTheme, jobsSystemPalette, scale, swagDarkSystemPalette, swagLightJobsSystemPalette, swagSystemPalette as swagLightSystemPalette, swagSystemPalette$1 as swagSystemPalette, defaultTheme as theme, useAvatarColors, useTheme, walletSystemPalette, withTheme, workSystemPalette };
+export { Accordion, Alert, AppCue, Attachment, index$9 as Avatar, Badge$1 as Badge, BottomNavigation, BottomSheet$1 as BottomSheet, Box, CompoundButton as Button, Calendar$1 as Calendar, Card$1 as Card, index$8 as Carousel, Checkbox, Chip, Collapse, ContentNavigator, DatePicker, Divider, index$7 as Drawer, Empty, ErrorComponent as Error, FAB, FlatListWithFAB, FloatingIsland, HeroDesignProvider, Icon, Image, List, index$6 as MapPin, PageControl, PinInput, Portal$1 as Portal, Progress, CompoundRadio as Radio, Rate, RefreshControl, index as RichTextEditor, ScrollViewWithFAB, Search, SectionHeading, SectionListWithFAB, index$4 as Select, Skeleton, Slider, Spinner, Success, index$5 as Swipeable, index$3 as Switch, index$2 as Tabs, Tag, TextInput, ThemeProvider, ThemeSwitcher, TimePicker, Toast, index$1 as Toolbar, Typography, eBensSystemPalette, ehWorkDarkSystemPalette, getTheme$1 as getTheme, jobsSystemPalette, scale, swagDarkSystemPalette, swagLightJobsSystemPalette, swagSystemPalette as swagLightSystemPalette, swagSystemPalette$1 as swagSystemPalette, defaultTheme as theme, useAvatarColors, useTheme, walletSystemPalette, withTheme, workSystemPalette };

package/lib/index.js

@@ -2029,7 +2029,9 @@ var swagBrandSystemPallete = {
   highlightedSurface: palette$3.violetLight90,
   pressedSurface: '#380060',
   decorativePrimary: '#fdfbff',
-  decorativePrimarySurface: '#dacce4'
+  decorativePrimarySurface: '#dacce4',
+  decorativeSecondary: '#fdfbff',
+  decorativeSecondarySurface: '#f0e6ff'
 };
 var swagSystemPalette = _objectSpread2(_objectSpread2({}, swagLightGlobalPalette), swagBrandSystemPallete);
 
@@ -2093,6 +2095,66 @@ var eBensBrandSystemPallete = {
 };
 var eBensSystemPalette = _objectSpread2(_objectSpread2({}, swagSystemPalette$1), eBensBrandSystemPallete);
 
+var ehWorkDarkSystemPalette = {
+  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'
+};
+
 var BASE_WIDTH = 390; // Based on iPhone 13's viewport size
 var horizontalScale = function horizontalScale(size) {
   if (reactNative.Platform.OS === 'web') {
@@ -2969,7 +3031,7 @@ var getErrorTheme = function getErrorTheme(theme) {
   var colors = {
     title: theme.colors.onDefaultGlobalSurface,
     description: theme.colors.mutedOnDefaultGlobalSurface,
-    fullScreenBackground: theme.colors.decorativePrimarySurface,
+    fullScreenBackground: theme.colors.defaultGlobalSurface,
     inPageBackground: theme.colors.neutralGlobalSurface
   };
   var fontSizes = {
@@ -3099,7 +3161,7 @@ var getImageTheme = function getImageTheme(theme) {
 
 var getListTheme = function getListTheme(theme) {
   var colors = {
-    checkedListItemContainerBackground: theme.colors.highlightedSurface,
+    checkedListItemContainerBackground: theme.colors.decorativeSecondarySurface,
     listItemContainerBackground: theme.colors.defaultGlobalSurface,
     leadingStatus: {
       danger: theme.colors.error,
@@ -3838,8 +3900,7 @@ var getToolbarTheme = function getToolbarTheme(theme) {
     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
@@ -5464,6 +5525,8 @@ var ThemeSwitcher = function ThemeSwitcher(_ref) {
         return getTheme$1(scale$1, swagDarkSystemPalette);
       case 'swagLight':
         return getTheme$1(scale$1, swagSystemPalette);
+      case 'ehWorkDark':
+        return getTheme$1(scale$1, ehWorkDarkSystemPalette);
     }
   }, [name]);
   return /*#__PURE__*/React__namespace.default.createElement(ThemeProvider, {
@@ -40447,6 +40510,7 @@ exports.Toast = Toast;
 exports.Toolbar = index$1;
 exports.Typography = Typography;
 exports.eBensSystemPalette = eBensSystemPalette;
+exports.ehWorkDarkSystemPalette = ehWorkDarkSystemPalette;
 exports.getTheme = getTheme$1;
 exports.jobsSystemPalette = jobsSystemPalette;
 exports.scale = scale;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.90.1",
+  "version": "8.91.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",

package/src/components/Error/__tests__/__snapshots__/index.spec.tsx.snap

@@ -344,7 +344,7 @@ exports[`Error renders full screen error page correctly 1`] = `
       style={
         [
           {
-            "backgroundColor": "#ccd2d3",
+            "backgroundColor": "#ffffff",
             "display": "flex",
             "flex": 1,
             "flexDirection": "column",

package/src/components/List/__tests__/__snapshots__/StyledBasicListItem.spec.tsx.snap

@@ -198,7 +198,7 @@ exports[`StyledListItemContainer renders correctly themeSelected true themeDisab
       [
         {
           "alignItems": "center",
-          "backgroundColor": "#ece8ef",
+          "backgroundColor": undefined,
           "borderRadius": 4,
           "flexDirection": "row",
           "opacity": 1,
@@ -282,7 +282,7 @@ exports[`StyledListItemContainer renders correctly themeSelected true themeDisab
       [
         {
           "alignItems": "center",
-          "backgroundColor": "#ece8ef",
+          "backgroundColor": undefined,
           "borderRadius": 4,
           "flexDirection": "row",
           "opacity": 0.38,

package/src/components/List/__tests__/__snapshots__/StyledListItem.spec.tsx.snap

@@ -428,7 +428,7 @@ exports[`ListItemContainer renders correctly themeSelected true themeVariant car
       [
         {
           "alignItems": "center",
-          "backgroundColor": "#ece8ef",
+          "backgroundColor": undefined,
           "borderRadius": 8,
           "elevation": 3,
           "flexDirection": "row",
@@ -518,7 +518,7 @@ exports[`ListItemContainer renders correctly themeSelected true themeVariant ful
     style={
       [
         {
-          "backgroundColor": "#ece8ef",
+          "backgroundColor": undefined,
           "borderRadius": 8,
           "flexDirection": "row",
           "padding": 16,

package/src/components/Radio/__tests__/__snapshots__/Radio.spec.tsx.snap

@@ -34,7 +34,7 @@ exports[`rendering renders correctly when checked with inactiveIntent=dark 1`] =
     style={
       [
         {
-          "backgroundColor": "#ece8ef",
+          "backgroundColor": undefined,
           "borderRadius": 8,
           "flexDirection": "row",
           "padding": 16,
@@ -201,7 +201,7 @@ exports[`rendering renders correctly when checked with inactiveIntent=light 1`]
     style={
       [
         {
-          "backgroundColor": "#ece8ef",
+          "backgroundColor": undefined,
           "borderRadius": 8,
           "flexDirection": "row",
           "padding": 16,

package/src/components/Radio/__tests__/__snapshots__/RadioGroup.spec.tsx.snap

@@ -299,7 +299,7 @@ exports[`rendering renders correctly with inactiveIntent=dark 1`] = `
       style={
         [
           {
-            "backgroundColor": "#ece8ef",
+            "backgroundColor": undefined,
             "borderRadius": 8,
             "flexDirection": "row",
             "padding": 16,
@@ -732,7 +732,7 @@ exports[`rendering renders correctly with inactiveIntent=light 1`] = `
       style={
         [
           {
-            "backgroundColor": "#ece8ef",
+            "backgroundColor": undefined,
             "borderRadius": 8,
             "flexDirection": "row",
             "padding": 16,

package/src/components/Select/MultiSelect/__tests__/__snapshots__/Option.spec.tsx.snap

@@ -35,7 +35,7 @@ exports[`Option renders correctly 1`] = `
       [
         {
           "alignItems": "center",
-          "backgroundColor": "#ece8ef",
+          "backgroundColor": undefined,
           "borderRadius": 4,
           "flexDirection": "row",
           "opacity": 1,

package/src/components/Select/MultiSelect/__tests__/__snapshots__/OptionList.spec.tsx.snap

@@ -224,7 +224,7 @@ exports[`OptionList render isLoading correctly 1`] = `
               [
                 {
                   "alignItems": "center",
-                  "backgroundColor": "#ece8ef",
+                  "backgroundColor": undefined,
                   "borderRadius": 4,
                   "flexDirection": "row",
                   "opacity": 1,
@@ -1098,7 +1098,7 @@ exports[`OptionList renders correctly 1`] = `
               [
                 {
                   "alignItems": "center",
-                  "backgroundColor": "#ece8ef",
+                  "backgroundColor": undefined,
                   "borderRadius": 4,
                   "flexDirection": "row",
                   "opacity": 1,
@@ -1819,7 +1819,7 @@ exports[`OptionList trigger onPress correctly on changing selection 1`] = `
               [
                 {
                   "alignItems": "center",
-                  "backgroundColor": "#ece8ef",
+                  "backgroundColor": undefined,
                   "borderRadius": 4,
                   "flexDirection": "row",
                   "opacity": 1,
@@ -2085,7 +2085,7 @@ exports[`OptionList trigger onPress correctly on changing selection 1`] = `
               [
                 {
                   "alignItems": "center",
-                  "backgroundColor": "#ece8ef",
+                  "backgroundColor": undefined,
                   "borderRadius": 4,
                   "flexDirection": "row",
                   "opacity": 1,
@@ -2568,7 +2568,7 @@ exports[`OptionList trigger onPress correctly on select additional value 1`] = `
               [
                 {
                   "alignItems": "center",
-                  "backgroundColor": "#ece8ef",
+                  "backgroundColor": undefined,
                   "borderRadius": 4,
                   "flexDirection": "row",
                   "opacity": 1,

package/src/components/Select/MultiSelect/__tests__/__snapshots__/index.spec.tsx.snap

@@ -2202,7 +2202,7 @@ exports[`rendering renders correct floating bottom sheet variant 1`] = `
                         [
                           {
                             "alignItems": "center",
-                            "backgroundColor": "#ece8ef",
+                            "backgroundColor": undefined,
                             "borderRadius": 4,
                             "flexDirection": "row",
                             "opacity": 1,
@@ -4207,7 +4207,7 @@ exports[`rendering renders correctly when bottom sheet is visible 1`] = `
                       [
                         {
                           "alignItems": "center",
-                          "backgroundColor": "#ece8ef",
+                          "backgroundColor": undefined,
                           "borderRadius": 4,
                           "flexDirection": "row",
                           "opacity": 1,
@@ -4371,7 +4371,7 @@ exports[`rendering renders correctly when bottom sheet is visible 1`] = `
                       [
                         {
                           "alignItems": "center",
-                          "backgroundColor": "#ece8ef",
+                          "backgroundColor": undefined,
                           "borderRadius": 4,
                           "flexDirection": "row",
                           "opacity": 1,
@@ -6534,7 +6534,7 @@ exports[`rendering renders correctly when receives sections 1`] = `
                       [
                         {
                           "alignItems": "center",
-                          "backgroundColor": "#ece8ef",
+                          "backgroundColor": undefined,
                           "borderRadius": 4,
                           "flexDirection": "row",
                           "opacity": 1,
@@ -6688,7 +6688,7 @@ exports[`rendering renders correctly when receives sections 1`] = `
                       [
                         {
                           "alignItems": "center",
-                          "backgroundColor": "#ece8ef",
+                          "backgroundColor": undefined,
                           "borderRadius": 4,
                           "flexDirection": "row",
                           "opacity": 1,
@@ -7621,7 +7621,7 @@ exports[`rendering renders correctly when receives sections 2`] = `
                       [
                         {
                           "alignItems": "center",
-                          "backgroundColor": "#ece8ef",
+                          "backgroundColor": undefined,
                           "borderRadius": 4,
                           "flexDirection": "row",
                           "opacity": 1,

package/src/components/Select/SingleSelect/__tests__/__snapshots__/Option.spec.tsx.snap

@@ -35,7 +35,7 @@ exports[`Option renders correctly 1`] = `
       [
         {
           "alignItems": "center",
-          "backgroundColor": "#ece8ef",
+          "backgroundColor": undefined,
           "borderRadius": 4,
           "flexDirection": "row",
           "opacity": 1,

package/src/components/Select/SingleSelect/__tests__/__snapshots__/OptionList.spec.tsx.snap

@@ -229,7 +229,7 @@ exports[`OptionList render isLoading correctly 1`] = `
               [
                 {
                   "alignItems": "center",
-                  "backgroundColor": "#ece8ef",
+                  "backgroundColor": undefined,
                   "borderRadius": 4,
                   "flexDirection": "row",
                   "opacity": 1,
@@ -1080,7 +1080,7 @@ exports[`OptionList renders correctly 1`] = `
               [
                 {
                   "alignItems": "center",
-                  "backgroundColor": "#ece8ef",
+                  "backgroundColor": undefined,
                   "borderRadius": 4,
                   "flexDirection": "row",
                   "opacity": 1,
@@ -1778,7 +1778,7 @@ exports[`OptionList trigger onPress correctly on select new value 1`] = `
               [
                 {
                   "alignItems": "center",
-                  "backgroundColor": "#ece8ef",
+                  "backgroundColor": undefined,
                   "borderRadius": 4,
                   "flexDirection": "row",
                   "opacity": 1,
@@ -2476,7 +2476,7 @@ exports[`OptionList trigger onPress correctly on unselect current value 1`] = `
               [
                 {
                   "alignItems": "center",
-                  "backgroundColor": "#ece8ef",
+                  "backgroundColor": undefined,
                   "borderRadius": 4,
                   "flexDirection": "row",
                   "opacity": 1,

package/src/components/Select/SingleSelect/__tests__/__snapshots__/index.spec.tsx.snap

@@ -2121,7 +2121,7 @@ exports[`rendering renders correct floating bottom sheet variant 1`] = `
                         [
                           {
                             "alignItems": "center",
-                            "backgroundColor": "#ece8ef",
+                            "backgroundColor": undefined,
                             "borderRadius": 4,
                             "flexDirection": "row",
                             "opacity": 1,
@@ -4013,7 +4013,7 @@ exports[`rendering renders correctly when bottom sheet is visible 1`] = `
                       [
                         {
                           "alignItems": "center",
-                          "backgroundColor": "#ece8ef",
+                          "backgroundColor": undefined,
                           "borderRadius": 4,
                           "flexDirection": "row",
                           "opacity": 1,
@@ -5961,7 +5961,7 @@ exports[`rendering renders correctly when receives sections 1`] = `
                       [
                         {
                           "alignItems": "center",
-                          "backgroundColor": "#ece8ef",
+                          "backgroundColor": undefined,
                           "borderRadius": 4,
                           "flexDirection": "row",
                           "opacity": 1,

package/src/index.ts

@@ -10,6 +10,7 @@ import theme, {
   jobsSystemPalette,
   walletSystemPalette,
   eBensSystemPalette,
+  ehWorkDarkSystemPalette,
   ThemeSwitcher,
   withTheme,
 } from './theme';
@@ -90,6 +91,7 @@ export {
   jobsSystemPalette,
   walletSystemPalette,
   eBensSystemPalette,
+  ehWorkDarkSystemPalette,
   Accordion,
   Alert,
   AppCue,

package/src/theme/ThemeSwitcher.tsx

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

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

@@ -547,7 +547,7 @@ exports[`theme returns correct theme object 1`] = `
     "error": {
       "colors": {
         "description": "#4d6265",
-        "fullScreenBackground": "#ccd2d3",
+        "fullScreenBackground": "#ffffff",
         "inPageBackground": "#f6f6f7",
         "title": "#001f23",
       },
@@ -696,7 +696,7 @@ exports[`theme returns correct theme object 1`] = `
     },
     "list": {
       "colors": {
-        "checkedListItemContainerBackground": "#ece8ef",
+        "checkedListItemContainerBackground": undefined,
         "leadingStatus": {
           "archived": "#abacaf",
           "danger": "#f46363",
@@ -1393,9 +1393,8 @@ exports[`theme returns correct theme object 1`] = `
       "colors": {
         "background": "#ffffff",
         "border": "#e8e9ea",
-        "danger": "#ffbe71",
+        "danger": "#cb300a",
         "disabled": "#bfc1c5",
-        "error": "#f46363",
         "iconButtonBackground": "#ece8ef",
         "info": "#b5c3fd",
         "inputContainerBackground": "#f6f6f7",

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/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/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,