@pega/react-sdk-components 0.25.3 → 0.25.5

package/lib/theme.js

@@ -1,7 +1,6 @@
 // @ts-nocheck
 import { createTheme } from '@mui/material';
-import { Theme } from '@mui/material/styles';
-import { getSdkConfig } from '@pega/auth/lib/sdk-auth-manager';
+import sdkConfig from '../../../sdk-config.json';
 const lightThemeColours = {
     ':root': {
         '--app-primary-color': '#007bff' /* was #673ab7; */,
@@ -18,7 +17,7 @@ const lightThemeColours = {
         '--app-warning-color-light': '#ffb74d',
         '--app-warning-color-dark': '#f57c00',
         '--app-background-color': 'whitesmoke',
-        '--app-form-color': 'white',
+        '--app-form-bg-color': 'white',
         /* App Navigation */
         '--app-nav-bg': '#262626' /*! default */,
         '--app-nav-color': '#d9d9d9' /* invert( var(--app-nav-bg)) !default */,
@@ -38,12 +37,15 @@ const lightThemeColours = {
         '--selected-step-label-color': 'rgba(0, 0, 0, 0.87)',
         '--step-label-color': 'rgba(0, 0, 0, 0.54)',
         '--svg-color': 'invert(0%)',
-        '--secondary-button-text-color': '#ffffff'
+        '--secondary-button-text-color': '#ffffff',
+        '--text-primary-color': '#000',
+        '--text-secondary-color': '#c0c0c0',
+        '--stepper-completed-bg-color': '#218721'
     }
 };
 const darkThemeColours = {
     ':root': {
-        '--app-primary-color': '#f72585' /* accent pink */,
+        '--app-primary-color': '#C70BB5' /* accent pink */,
         '--app-primary-dark-color': '#c2185b' /* darker pink */,
         '--app-primary-light-color': '#ff5ca2' /* lighter pink */,
         '--app-secondary-color': '#c0c0c0' /* accent silver */,
@@ -57,7 +59,7 @@ const darkThemeColours = {
         '--app-warning-color-light': '#ffe082' /* light amber */,
         '--app-warning-color-dark': '#c68400' /* dark amber */,
         '--app-background-color': '#060326' /* main dark background */,
-        '--app-form-color': '#18132c' /* slightly lighter for forms */,
+        '--app-form-bg-color': '#23273f' /* slightly lighter for forms */,
         /* App Navigation */
         '--app-nav-bg': '#18132c' /* navigation background */,
         '--app-nav-color': '#c0c0c0',
@@ -76,7 +78,10 @@ const darkThemeColours = {
         '--selected-step-label-color': 'rgba(0, 0, 0, 0.87)',
         '--step-label-color': 'rgba(0, 0, 0, 0.54)',
         '--svg-color': 'invert(100%)',
-        '--secondary-button-text-color': '#1a103c'
+        '--secondary-button-text-color': '#1a103c',
+        '--text-primary-color': '#e0e0e0',
+        '--text-secondary-color': '#c0c0c0',
+        '--stepper-completed-bg-color': '#158715'
     }
 };
 const lightTheme = createTheme({
@@ -97,6 +102,12 @@ const lightTheme = createTheme({
             }
         }
     },
+    headerNav: {
+        backgroundColor: '#ffffff',
+        navLinkColor: 'rgba(0, 0, 0, 0.87)',
+        navLinkHoverColor: '#3f51b5',
+        menuToggleColor: 'rgba(0, 0, 0, 0.87)'
+    },
     actionButtons: {
         primary: {
             backgroundColor: '#cc0f60',
@@ -144,7 +155,12 @@ const darkTheme = createTheme({
                     background: 'radial-gradient(178.62% 112% at 50% -12%, #0B0F2A 69.96%, #111951 89.19%)',
                     backgroundAttachment: 'fixed'
                 },
-                ...darkThemeColours
+                ...darkThemeColours,
+                // scrollbar styling
+                '*': {
+                    scrollbarWidth: 'thin', // Options: auto | thin | none
+                    scrollbarColor: '#555 #2c2c2c' // thumb color, track color
+                }
             }
         },
         MuiPaper: {
@@ -163,6 +179,12 @@ const darkTheme = createTheme({
             }
         }
     },
+    headerNav: {
+        backgroundColor: 'var(--app-nav-bg)',
+        navLinkColor: 'var(--app-nav-color)',
+        navLinkHoverColor: '#ffffff',
+        menuToggleColor: '#ffffff'
+    },
     actionButtons: {
         primary: {
             backgroundColor: '#C70BB5',
@@ -185,8 +207,8 @@ const darkTheme = createTheme({
     palette: {
         mode: 'dark',
         primary: {
-            main: '#f72585', // accent pink
-            light: '#ff5ca2', // lighter shade of pink
+            main: '#C70BB5', // pink
+            light: '#C70BB5', // pink
             dark: '#c2185b', // darker shade
             contrastText: '#ffffff' // white text on pink buttons
         },
@@ -198,13 +220,12 @@ const darkTheme = createTheme({
         },
         info: {
             main: '#e91e63', // Pink
-            dark: '#ad1457', // Darker pink
-            light: '#f8bbd0', // Light pink for backgrounds
+            dark: '#E885D2', // Light pink
+            light: '#C70BB5', // Lighter pink for backgrounds
             contrastText: '#fff'
         },
         background: {
-            // default: 'radial-gradient(178.62% 112% at 50% -12%, #0B0F2A 69.96%, #111951 89.19%)',
-            paper: 'rgba(255, 255, 255, 0.1)' // card-bg
+            paper: '#191b2c' // card-bg
         },
         text: {
             primary: '#e0e0e0', // text-light
@@ -213,6 +234,5 @@ const darkTheme = createTheme({
         divider: 'rgba(255, 255, 255, 0.1)' // border-color
     }
 });
-const sdkConfig = await getSdkConfig();
 export const theme = sdkConfig.theme === 'dark' ? darkTheme : lightTheme;
 //# sourceMappingURL=theme.js.map

package/lib/theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme.js","sourceRoot":"","sources":["../src/theme.ts"],"names":[],"mappings":"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","sourcesContent":["// @ts-nocheck\nimport { createTheme } from '@mui/material';\nimport { Theme } from '@mui/material/styles';\n\nimport { getSdkConfig } from '@pega/auth/lib/sdk-auth-manager';\n\n/**\n * Since makeStyles is now exported from @mui/styles package which does not know about Theme in the core package.\n * you need to augment the DefaultTheme (empty object) in @mui/styles with Theme from the core.\n */\ndeclare module '@mui/styles/defaultTheme' {\n  interface DefaultTheme extends Theme {\n    backgroundColor: string;\n    card: {\n      backgroundColor: string;\n      borderLeft: string;\n      borderLeftColor: string;\n    };\n    modal: {\n      backgroundColor: string;\n      topColor: string;\n    };\n    embedded: {\n      resolutionTextColor: string;\n    };\n    actionButtons: {\n      primary: {\n        backgroundColor: string;\n        color: string;\n      };\n      secondary: {\n        backgroundColor: string;\n        color: string;\n      };\n    };\n  }\n}\n\nconst lightThemeColours = {\n  ':root': {\n    '--app-primary-color': '#007bff' /* was #673ab7; */,\n    '--app-primary-dark-color': '#0048cc' /* was #4527A0; */,\n    '--app-primary-light-color': '#33aeff' /* was #B499FC; */,\n    '--app-secondary-color': '#FFC400',\n    '--app-neutral-color': 'grey',\n    '--app-neutral-light-color': 'lightgrey',\n    '--app-neutral-dark-color': '#262626',\n    '--app-error-color': '#f44336',\n    '--app-error-light-color': '#e57373',\n    '--app-error-dark-color': '#d32f2f',\n    '--app-warning-color': '#ff9800',\n    '--app-warning-color-light': '#ffb74d',\n    '--app-warning-color-dark': '#f57c00',\n\n    '--app-background-color': 'whitesmoke',\n    '--app-form-color': 'white',\n\n    /* App Navigation */\n    '--app-nav-bg': '#262626' /*! default */,\n    '--app-nav-color': '#d9d9d9' /* invert( var(--app-nav-bg)) !default */,\n\n    /* Few custom colors */\n    '--modal-background-color': 'rgba(100, 100, 100, 0.4)',\n    '--modal-top-color': 'white',\n    '--modal-border-color': 'black',\n    '--modal-box-shadow-color': '#777',\n    '--utility-count-background-color': '#65b5f5',\n    '--utility-card-border-color': '#f5f5f5',\n    '--link-button-color': '#3f51b5',\n    '--banner-text-color': 'rgb(0, 0, 0)',\n    '--app-text-color': 'white',\n    '--utility-background-color': 'white',\n    '--table-header-background': '#f5f5f5',\n    '--step-line-color': 'rgba(0, 0, 0, 0.12)',\n    '--selected-step-label-color': 'rgba(0, 0, 0, 0.87)',\n    '--step-label-color': 'rgba(0, 0, 0, 0.54)',\n    '--svg-color': 'invert(0%)',\n    '--secondary-button-text-color': '#ffffff'\n  }\n};\nconst darkThemeColours = {\n  ':root': {\n    '--app-primary-color': '#f72585' /* accent pink */,\n    '--app-primary-dark-color': '#c2185b' /* darker pink */,\n    '--app-primary-light-color': '#ff5ca2' /* lighter pink */,\n    '--app-secondary-color': '#c0c0c0' /* accent silver */,\n    '--app-neutral-color': '#b0b0b0' /* light gray for text/icons */,\n    '--app-neutral-light-color': '#e0e0e0' /* lighter gray for highlights */,\n    '--app-neutral-dark-color': '#262626' /* dark gray for backgrounds */,\n    '--app-error-color': '#ff5370' /* vibrant error red */,\n    '--app-error-light-color': '#ffb4b4' /* soft error red */,\n    '--app-error-dark-color': '#b71c1c' /* deep error red */,\n    '--app-warning-color': '#ffb300' /* amber warning */,\n    '--app-warning-color-light': '#ffe082' /* light amber */,\n    '--app-warning-color-dark': '#c68400' /* dark amber */,\n\n    '--app-background-color': '#060326' /* main dark background */,\n    '--app-form-color': '#18132c' /* slightly lighter for forms */,\n\n    /* App Navigation */\n    '--app-nav-bg': '#18132c' /* navigation background */,\n    '--app-nav-color': '#c0c0c0',\n\n    '--modal-background-color': 'rgba(40, 30, 90, 0.85)' /* nearly matches #060326, slightly lighter and more opaque */,\n    '--modal-top-color': '#2a1f54' /* light pink accent for modal top */,\n    '--modal-border-color': '#2a1f54' /* matches card background */,\n    '--modal-box-shadow-color': '#777',\n\n    '--utility-count-background-color': '#f8aaf0',\n    '--utility-card-border-color': '#2a1f54',\n    '--link-button-color': '#f72585',\n    '--banner-text-color': '#e0e0e0',\n    '--app-text-color': '#e0e0e0',\n    '--utility-background-color': '#2a1f54',\n    '--table-header-background': '#18132c',\n    '--step-line-color': 'rgba(0, 0, 0, 0.12)',\n    '--selected-step-label-color': 'rgba(0, 0, 0, 0.87)',\n    '--step-label-color': 'rgba(0, 0, 0, 0.54)',\n    '--svg-color': 'invert(100%)',\n    '--secondary-button-text-color': '#1a103c'\n  }\n};\n\nconst lightTheme = createTheme({\n  components: {\n    MuiCssBaseline: {\n      styleOverrides: {\n        ...lightThemeColours\n      }\n    },\n    MuiTextField: {\n      defaultProps: {\n        size: 'small'\n      },\n      styleOverrides: {\n        root: {\n          width: '100%'\n        }\n      }\n    }\n  },\n  actionButtons: {\n    primary: {\n      backgroundColor: '#cc0f60',\n      color: '#FFFFFF'\n    },\n    secondary: {\n      backgroundColor: '#3F51B5',\n      color: '#FFFFFF'\n    }\n  },\n  modal: {\n    backgroundColor: 'rgba(100, 100, 100, 0.4)',\n    topColor: 'white'\n  },\n  embedded: {\n    resolutionTextColor: 'darkslategray'\n  },\n  backgroundColor: '#fff',\n  card: {\n    backgroundColor: '#fff',\n    borderLeft: '6px solid',\n    borderLeftColor: '#C70BB5'\n  },\n  palette: {\n    primary: {\n      contrastText: '#fff',\n      dark: '#303f9f',\n      light: '#7986cb',\n      main: '#3f51b5'\n    },\n    secondary: {\n      contrastText: '#fff',\n      dark: '#c51162',\n      light: '#ff4081',\n      main: '#f50057'\n    },\n    backgroundColor: '#fff'\n  }\n});\n\nconst darkTheme = createTheme({\n  components: {\n    MuiCssBaseline: {\n      styleOverrides: {\n        body: {\n          background: 'radial-gradient(178.62% 112% at 50% -12%, #0B0F2A 69.96%, #111951 89.19%)',\n          backgroundAttachment: 'fixed'\n        },\n        ...darkThemeColours\n      }\n    },\n    MuiPaper: {\n      styleOverrides: {\n        root: {}\n      }\n    },\n    MuiTextField: {\n      defaultProps: {\n        size: 'small'\n      },\n      styleOverrides: {\n        root: {\n          width: '100%'\n        }\n      }\n    }\n  },\n  actionButtons: {\n    primary: {\n      backgroundColor: '#C70BB5',\n      color: '#FFFFFF'\n    },\n    secondary: {\n      backgroundColor: '#FFFFFF',\n      color: '#C70BB5'\n    }\n  },\n  embedded: {\n    resolutionTextColor: 'darkslategray'\n  },\n  backgroundColor: '#060326',\n  card: {\n    backgroundColor: 'rgba(255, 255, 255, 0.3)',\n    borderLeft: '',\n    borderLeftColor: ''\n  },\n  palette: {\n    mode: 'dark',\n    primary: {\n      main: '#f72585', // accent pink\n      light: '#ff5ca2', // lighter shade of pink\n      dark: '#c2185b', // darker shade\n      contrastText: '#ffffff' // white text on pink buttons\n    },\n    secondary: {\n      main: '#c0c0c0', // accent silver\n      light: '#d9d9d9',\n      dark: '#8c8c8c',\n      contrastText: '#1a103c' // dark text on silver background\n    },\n    info: {\n      main: '#e91e63', // Pink\n      dark: '#ad1457', // Darker pink\n      light: '#f8bbd0', // Light pink for backgrounds\n      contrastText: '#fff'\n    },\n    background: {\n      // default: 'radial-gradient(178.62% 112% at 50% -12%, #0B0F2A 69.96%, #111951 89.19%)',\n      paper: 'rgba(255, 255, 255, 0.1)' // card-bg\n    },\n    text: {\n      primary: '#e0e0e0', // text-light\n      secondary: '#c0c0c0' // silver for muted text\n    },\n    divider: 'rgba(255, 255, 255, 0.1)' // border-color\n  }\n});\n\nconst sdkConfig = await getSdkConfig();\n\nexport const theme = sdkConfig.theme === 'dark' ? darkTheme : lightTheme;\n"]}
+{"version":3,"file":"theme.js","sourceRoot":"","sources":["../src/theme.ts"],"names":[],"mappings":"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","sourcesContent":["// @ts-nocheck\nimport { createTheme } from '@mui/material';\nimport type { Theme } from '@mui/material/styles';\n\nimport sdkConfig from '../../../sdk-config.json';\n\n/**\n * Since makeStyles is now exported from @mui/styles package which does not know about Theme in the core package.\n * you need to augment the DefaultTheme (empty object) in @mui/styles with Theme from the core.\n */\ndeclare module '@mui/styles/defaultTheme' {\n  interface DefaultTheme extends Theme {\n    backgroundColor: string;\n    card: {\n      backgroundColor: string;\n      borderLeft: string;\n      borderLeftColor: string;\n    };\n    modal: {\n      backgroundColor: string;\n      topColor: string;\n    };\n    headerNav: {\n      backgroundColor: string;\n      navLinkColor: string;\n      navLinkHoverColor: string;\n      menuToggleColor: string;\n    };\n    embedded: {\n      resolutionTextColor: string;\n    };\n    actionButtons: {\n      primary: {\n        backgroundColor: string;\n        color: string;\n      };\n      secondary: {\n        backgroundColor: string;\n        color: string;\n      };\n    };\n  }\n}\n\nconst lightThemeColours = {\n  ':root': {\n    '--app-primary-color': '#007bff' /* was #673ab7; */,\n    '--app-primary-dark-color': '#0048cc' /* was #4527A0; */,\n    '--app-primary-light-color': '#33aeff' /* was #B499FC; */,\n    '--app-secondary-color': '#FFC400',\n    '--app-neutral-color': 'grey',\n    '--app-neutral-light-color': 'lightgrey',\n    '--app-neutral-dark-color': '#262626',\n    '--app-error-color': '#f44336',\n    '--app-error-light-color': '#e57373',\n    '--app-error-dark-color': '#d32f2f',\n    '--app-warning-color': '#ff9800',\n    '--app-warning-color-light': '#ffb74d',\n    '--app-warning-color-dark': '#f57c00',\n\n    '--app-background-color': 'whitesmoke',\n    '--app-form-bg-color': 'white',\n\n    /* App Navigation */\n    '--app-nav-bg': '#262626' /*! default */,\n    '--app-nav-color': '#d9d9d9' /* invert( var(--app-nav-bg)) !default */,\n\n    /* Few custom colors */\n    '--modal-background-color': 'rgba(100, 100, 100, 0.4)',\n    '--modal-top-color': 'white',\n    '--modal-border-color': 'black',\n    '--modal-box-shadow-color': '#777',\n    '--utility-count-background-color': '#65b5f5',\n    '--utility-card-border-color': '#f5f5f5',\n    '--link-button-color': '#3f51b5',\n    '--banner-text-color': 'rgb(0, 0, 0)',\n    '--app-text-color': 'white',\n    '--utility-background-color': 'white',\n    '--table-header-background': '#f5f5f5',\n    '--step-line-color': 'rgba(0, 0, 0, 0.12)',\n    '--selected-step-label-color': 'rgba(0, 0, 0, 0.87)',\n    '--step-label-color': 'rgba(0, 0, 0, 0.54)',\n    '--svg-color': 'invert(0%)',\n    '--secondary-button-text-color': '#ffffff',\n\n    '--text-primary-color': '#000',\n    '--text-secondary-color': '#c0c0c0',\n    '--stepper-completed-bg-color': '#218721'\n  }\n};\nconst darkThemeColours = {\n  ':root': {\n    '--app-primary-color': '#C70BB5' /* accent pink */,\n    '--app-primary-dark-color': '#c2185b' /* darker pink */,\n    '--app-primary-light-color': '#ff5ca2' /* lighter pink */,\n    '--app-secondary-color': '#c0c0c0' /* accent silver */,\n    '--app-neutral-color': '#b0b0b0' /* light gray for text/icons */,\n    '--app-neutral-light-color': '#e0e0e0' /* lighter gray for highlights */,\n    '--app-neutral-dark-color': '#262626' /* dark gray for backgrounds */,\n    '--app-error-color': '#ff5370' /* vibrant error red */,\n    '--app-error-light-color': '#ffb4b4' /* soft error red */,\n    '--app-error-dark-color': '#b71c1c' /* deep error red */,\n    '--app-warning-color': '#ffb300' /* amber warning */,\n    '--app-warning-color-light': '#ffe082' /* light amber */,\n    '--app-warning-color-dark': '#c68400' /* dark amber */,\n\n    '--app-background-color': '#060326' /* main dark background */,\n    '--app-form-bg-color': '#23273f' /* slightly lighter for forms */,\n\n    /* App Navigation */\n    '--app-nav-bg': '#18132c' /* navigation background */,\n    '--app-nav-color': '#c0c0c0',\n\n    '--modal-background-color': 'rgba(40, 30, 90, 0.85)' /* nearly matches #060326, slightly lighter and more opaque */,\n    '--modal-top-color': '#2a1f54' /* light pink accent for modal top */,\n    '--modal-border-color': '#2a1f54' /* matches card background */,\n    '--modal-box-shadow-color': '#777',\n\n    '--utility-count-background-color': '#f8aaf0',\n    '--utility-card-border-color': '#2a1f54',\n    '--link-button-color': '#f72585',\n    '--banner-text-color': '#e0e0e0',\n    '--app-text-color': '#e0e0e0',\n    '--utility-background-color': '#2a1f54',\n    '--table-header-background': '#18132c',\n    '--step-line-color': 'rgba(0, 0, 0, 0.12)',\n    '--selected-step-label-color': 'rgba(0, 0, 0, 0.87)',\n    '--step-label-color': 'rgba(0, 0, 0, 0.54)',\n    '--svg-color': 'invert(100%)',\n    '--secondary-button-text-color': '#1a103c',\n\n    '--text-primary-color': '#e0e0e0',\n    '--text-secondary-color': '#c0c0c0',\n    '--stepper-completed-bg-color': '#158715'\n  }\n};\n\nconst lightTheme = createTheme({\n  components: {\n    MuiCssBaseline: {\n      styleOverrides: {\n        ...lightThemeColours\n      }\n    },\n    MuiTextField: {\n      defaultProps: {\n        size: 'small'\n      },\n      styleOverrides: {\n        root: {\n          width: '100%'\n        }\n      }\n    }\n  },\n  headerNav: {\n    backgroundColor: '#ffffff',\n    navLinkColor: 'rgba(0, 0, 0, 0.87)',\n    navLinkHoverColor: '#3f51b5',\n    menuToggleColor: 'rgba(0, 0, 0, 0.87)'\n  },\n  actionButtons: {\n    primary: {\n      backgroundColor: '#cc0f60',\n      color: '#FFFFFF'\n    },\n    secondary: {\n      backgroundColor: '#3F51B5',\n      color: '#FFFFFF'\n    }\n  },\n  modal: {\n    backgroundColor: 'rgba(100, 100, 100, 0.4)',\n    topColor: 'white'\n  },\n  embedded: {\n    resolutionTextColor: 'darkslategray'\n  },\n  backgroundColor: '#fff',\n  card: {\n    backgroundColor: '#fff',\n    borderLeft: '6px solid',\n    borderLeftColor: '#C70BB5'\n  },\n  palette: {\n    primary: {\n      contrastText: '#fff',\n      dark: '#303f9f',\n      light: '#7986cb',\n      main: '#3f51b5'\n    },\n    secondary: {\n      contrastText: '#fff',\n      dark: '#c51162',\n      light: '#ff4081',\n      main: '#f50057'\n    },\n    backgroundColor: '#fff'\n  }\n});\n\nconst darkTheme = createTheme({\n  components: {\n    MuiCssBaseline: {\n      styleOverrides: {\n        body: {\n          background: 'radial-gradient(178.62% 112% at 50% -12%, #0B0F2A 69.96%, #111951 89.19%)',\n          backgroundAttachment: 'fixed'\n        },\n        ...darkThemeColours,\n\n        // scrollbar styling\n        '*': {\n          scrollbarWidth: 'thin', // Options: auto | thin | none\n          scrollbarColor: '#555 #2c2c2c' // thumb color, track color\n        }\n      }\n    },\n    MuiPaper: {\n      styleOverrides: {\n        root: {}\n      }\n    },\n    MuiTextField: {\n      defaultProps: {\n        size: 'small'\n      },\n      styleOverrides: {\n        root: {\n          width: '100%'\n        }\n      }\n    }\n  },\n  headerNav: {\n    backgroundColor: 'var(--app-nav-bg)',\n    navLinkColor: 'var(--app-nav-color)',\n    navLinkHoverColor: '#ffffff',\n    menuToggleColor: '#ffffff'\n  },\n  actionButtons: {\n    primary: {\n      backgroundColor: '#C70BB5',\n      color: '#FFFFFF'\n    },\n    secondary: {\n      backgroundColor: '#FFFFFF',\n      color: '#C70BB5'\n    }\n  },\n  embedded: {\n    resolutionTextColor: 'darkslategray'\n  },\n  backgroundColor: '#060326',\n  card: {\n    backgroundColor: 'rgba(255, 255, 255, 0.3)',\n    borderLeft: '',\n    borderLeftColor: ''\n  },\n  palette: {\n    mode: 'dark',\n    primary: {\n      main: '#C70BB5', // pink\n      light: '#C70BB5', // pink\n      dark: '#c2185b', // darker shade\n      contrastText: '#ffffff' // white text on pink buttons\n    },\n    secondary: {\n      main: '#c0c0c0', // accent silver\n      light: '#d9d9d9',\n      dark: '#8c8c8c',\n      contrastText: '#1a103c' // dark text on silver background\n    },\n    info: {\n      main: '#e91e63', // Pink\n      dark: '#E885D2', // Light pink\n      light: '#C70BB5', // Lighter pink for backgrounds\n      contrastText: '#fff'\n    },\n    background: {\n      paper: '#191b2c' // card-bg\n    },\n    text: {\n      primary: '#e0e0e0', // text-light\n      secondary: '#c0c0c0' // silver for muted text\n    },\n    divider: 'rgba(255, 255, 255, 0.1)' // border-color\n  }\n});\n\nexport const theme = sdkConfig.theme === 'dark' ? darkTheme : lightTheme;\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/react-sdk-components",
-  "version": "0.25.3",
+  "version": "0.25.5",
   "description": "React SDK Infrastructure: bridge and components",
   "_filesComment": "During packing, npm ignores everything NOT in the files list",
   "files": [