@centreon/ui 26.11.2 → 26.11.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "26.11.2",
+  "version": "26.11.4",
   "description": "Centreon UI Components",
   "scripts": {
     "update:deps": "pnpx npm-check-updates -i --format group",

package/src/Form/CollapsibleGroup.tsx

@@ -95,7 +95,7 @@ const CollapsibleGroup = ({
         <ContainerComponent>
           <div
             className={
-              'snap-y flex flex-row justify-between w-full pl-3 pr-1 text-white items-center'
+              'snap-y flex flex-row justify-between w-full pl-3 pr-1 text-text-primary items-center'
             }
             data-testid={`${group?.name}-header`}
           >

package/src/Listing/Header/Cell/ListingHeaderCell.tsx

@@ -76,15 +76,15 @@ const ListingHeaderCell = ({
         height: dataStyle.header.height
       }}
     >
-      <div className="flex items-center h-full justify-between text-white p-0">
+      <div className="flex items-center h-full justify-between text-text-primary p-0">
         {column.sortable ? (
           <TableSortLabel
             active={sortField === columnSortField}
             aria-label={`Column ${column.label}`}
             classes={{
-              icon: 'text-white'
+              icon: 'text-text-primary'
             }}
-            className="text-white"
+            className="text-text-primary"
             direction={sortOrder || 'desc'}
             onClick={sort}
           >
@@ -99,7 +99,7 @@ const ListingHeaderCell = ({
         {columnConfiguration?.sortable && areColumnsEditable && (
           <DraggableIconButton
             {...props}
-            className={`p-0 ${isDragging ? 'cursor-grabbing' : 'cursor-grab'} text-white  opacity-0 hover:opacity-100 focus:opacity-100`}
+            className={`p-0 ${isDragging ? 'cursor-grabbing' : 'cursor-grab'} text-text-primary  opacity-0 hover:opacity-100 focus:opacity-100`}
             columnLabel={columnLabel}
           />
         )}

package/src/Listing/Header/Cell/SelectActionListingHeaderCell.tsx

@@ -35,7 +35,7 @@ const SelectActionListingHeaderCell = ({
     >
       <Checkbox
         checked={hasRows && selectedRowCount === rowCount}
-        className="text-white"
+        className="text-text-primary"
         indeterminate={
           hasRows && selectedRowCount > 0 && selectedRowCount < rowCount
         }
@@ -44,7 +44,7 @@ const SelectActionListingHeaderCell = ({
       />
       {not(isEmpty(predefinedRowsSelection)) ? (
         <PopoverMenu
-          className="text-white"
+          className="text-text-primary"
           icon={<ArrowDropDownIcon />}
           title={labelPredefinedRowsSelectionMenu}
         >
@@ -57,7 +57,7 @@ const SelectActionListingHeaderCell = ({
           )}
         </PopoverMenu>
       ) : (
-        <div className="text-white" />
+        <div className="text-text-primary" />
       )}
     </TableCell>
   );

package/src/ThemeProvider/palettes.ts

@@ -187,7 +187,7 @@ export const lightPalette: PaletteOptions = {
   },
   background: {
     default: '#F4F4F4',
-    listingHeader: '#666666',
+    listingHeader: '#D9D9D9',
     panel: '#EDEDED',
     panelGroups: '#F5F5F5',
     paper: '#FFFFFF',
@@ -206,6 +206,8 @@ export const lightPalette: PaletteOptions = {
   divider: '#E3E3E3',
   error: {
     contrastText: '#000',
+    dark: '#B23333',
+    light: '#FF6E6E',
     main: '#FF4A4A'
   },
   header: {
@@ -275,9 +277,9 @@ export const lightPalette: PaletteOptions = {
   },
   primary: {
     contrastText: '#fff',
-    dark: '#255891',
-    light: '#cde7fc',
-    main: '#2E68AA'
+    dark: '#2A3575',
+    light: '#D8DCE9',
+    main: '#131D5A'
   },
   secondary: {
     contrastText: '#fff',
@@ -286,15 +288,17 @@ export const lightPalette: PaletteOptions = {
     main: '#C772D6'
   },
   statusBackground: {
-    error: '#FF6666',
+    error: '#FF6E6E',
     none: alpha('#2E68AA', 0.1),
     pending: '#1EBEB3',
-    success: '#88B922',
+    success: '#9FC74E',
     unknown: '#E3E3E3',
-    warning: '#FD9B27'
+    warning: '#FCC481'
   },
   success: {
     contrastText: '#000',
+    dark: '#5F8117',
+    light: '#9FC74E',
     main: '#88B922'
   },
   text: {
@@ -309,7 +313,7 @@ export const lightPalette: PaletteOptions = {
   },
   warning: {
     contrastText: '#000',
-    dark: '#FC7E00',
+    dark: '#B16C1B',
     light: '#FCC481',
     main: '#FD9B27'
   }
@@ -355,7 +359,9 @@ export const darkPalette: PaletteOptions = {
   divider: '#666666',
   error: {
     contrastText: '#fff',
-    main: '#D60101'
+    dark: '#B23333',
+    light: '#FF6E6E',
+    main: '#FF4A4A'
   },
   header: {
     page: {
@@ -420,7 +426,7 @@ export const darkPalette: PaletteOptions = {
   mode: ThemeMode.dark,
   pending: {
     contrastText: '#fff',
-    main: '#118077'
+    main: '#1EBEB3'
   },
   primary: {
     contrastText: '#000',
@@ -433,16 +439,18 @@ export const darkPalette: PaletteOptions = {
     main: '#7C1FA2'
   },
   statusBackground: {
-    error: '#D60101',
+    error: '#FF4A4A',
     none: alpha('#2E68AA', 0.1),
-    pending: '#118077',
-    success: '#5F8118',
+    pending: '#1EBEB3',
+    success: '#88B922',
     unknown: '#666666',
-    warning: '#C55400'
+    warning: '#FD9B27'
   },
   success: {
     contrastText: '#fff',
-    main: '#5F8118'
+    dark: '#5F8117',
+    light: '#9FC74E',
+    main: '#88B922'
   },
   text: {
     disabled: '#666666',
@@ -456,7 +464,9 @@ export const darkPalette: PaletteOptions = {
   },
   warning: {
     contrastText: '#fff',
-    main: '#C55400'
+    dark: '#B16C1B',
+    light: '#FCC481',
+    main: '#FD9B27'
   }
 };
 

package/src/ThemeProvider/tailwindcss.css

@@ -46,13 +46,19 @@
 
   /* Background colors */
   --color-background-default: #f4f4f4;
-  --color-background-listing-header: #666666;
+  --color-background-listing-header: #d9d9d9;
   --color-background-panel: #ededed;
   --color-background-panel-groups: #f5f5f5;
   --color-background-paper: #ffffff;
   --color-background-tooltip: #434e58;
   --color-background-widget: #f8f8f8;
 
+  /* Brand colors. Deliberately not overridden in the dark variant: they paint
+     brand surfaces that stay the same in both themes. */
+  --color-brand-navy: #131d5a;
+  --color-brand-navy-action: #cde7fc;
+  --color-brand-navy-action-text: #2e68aa;
+
   /* Chip colors */
   --color-chip-error: #ff6666;
   --color-chip-info: #1588d1;
@@ -63,6 +69,8 @@
   /* Utility colors */
   --color-divider: #e3e3e3;
   --color-error-main: #ff4a4a;
+  --color-error-light: #ff6e6e;
+  --color-error-dark: #b23333;
 
   /* Header colors */
   --color-header-page-action-background-active: #1975d10f;
@@ -95,22 +103,27 @@
   --color-pending-main: #1ebeb3;
 
   /* Primary & Secondary colors */
-  --color-primary-main: #2e68aa;
-  --color-primary-light: #cde7fc;
-  --color-primary-dark: #255891;
+  --color-primary-main: #131d5a;
+  --color-primary-light: #d8dce9;
+  --color-primary-dark: #2a3575;
   --color-primary-contrastText: #fff;
   --color-secondary-main: #c772d6;
   --color-secondary-light: #e5a5f0;
   --color-secondary-dark: #ac28c1;
 
+  /* Section title color */
+  --color-section-title: #131d5a;
+
   /* Status colors */
-  --color-status-background-error: #ff6666;
+  --color-status-background-error: #ff6e6e;
   --color-status-background-none: --alpha(#2e68aa / 10%);
   --color-status-background-pending: #1ebeb3;
-  --color-status-background-success: #88b922;
+  --color-status-background-success: #9fc74e;
   --color-stauts-background-unknown: #e3e3e3;
-  --color-status-background-warning: #fd9b27;
+  --color-status-background-warning: #fcc481;
   --color-success-main: #88b922;
+  --color-success-light: #9fc74e;
+  --color-success-dark: #5f8117;
 
   /* Tile container colors */
   --color-tile-background: #ffffff;
@@ -123,7 +136,7 @@
   --color-text-secondary: #666666;
   --color-warning-main: #fd9b27;
   --color-warning-light: #fcc481;
-  --color-warning-dark: #fc7e00;
+  --color-warning-dark: #b16c1b;
 
   /* Base colors */
   --color-white: #ffffff;
@@ -161,7 +174,9 @@
     --color-chip-success: #5f8118;
     --color-chip-warning: #c55400;
     --color-divider: #666666;
-    --color-error-main: #d60101;
+    --color-error-main: #ff4a4a;
+    --color-error-light: #ff6e6e;
+    --color-error-dark: #b23333;
     --color-header-page-action-background-active: #1975d10f;
     --color-header-page-action-background-default: #ffffff00;
     --color-header-page-action-color-active: #1976d2;
@@ -187,26 +202,31 @@
     --color-header-menu-item-color-active: #3e85d5;
     --color-header-menu-item-color-default: #f9fafb;
     --color-header-menu-item-color-hover: #ffffff;
-    --color-pending-main: #118077;
+    --color-pending-main: #1ebeb3;
     --color-primary-main: #6eaff8;
     --color-primary-light: #8bbff9;
     --color-primary-dark: #4974a5;
     --color-primary-contrastText: #000;
     --color-secondary-main: #7c1fa2;
-    --color-status-background-error: #d60101;
+    --color-section-title: #ffffff;
+    --color-status-background-error: #ff4a4a;
     --color-status-background-none: --alpha(#2e68aa / 10%);
-    --color-status-background-pending: #118077;
-    --color-status-background-success: #5f8118;
+    --color-status-background-pending: #1ebeb3;
+    --color-status-background-success: #88b922;
     --color-stauts-background-unknown: #666666;
-    --color-status-background-warning: #c55400;
-    --color-success-main: #5f8118;
+    --color-status-background-warning: #fd9b27;
+    --color-success-main: #88b922;
+    --color-success-light: #9fc74e;
+    --color-success-dark: #5f8117;
     --color-tile-background: #2e2e2e;
     --color-tile-border: #4a4a4a;
     --color-tile-border-hover: #6d6d6d;
     --color-text-disabled: #666666;
     --color-text-primary: #ffffff;
     --color-text-secondary: #cccccc;
-    --color-warning-main: #c55400;
+    --color-warning-main: #fd9b27;
+    --color-warning-light: #fcc481;
+    --color-warning-dark: #b16c1b;
   }
 }
 

package/src/components/CopyCommand/CopyCommand.styles.tsx

@@ -85,7 +85,7 @@ export const useCopyCommandStyle = makeStyles()((theme) => ({
   languageChip: {
     background: theme.palette.background.listingHeader,
     borderRadius: `0px ${theme.shape.borderRadius}px ${theme.shape.borderRadius}px ${theme.shape.borderRadius}px`,
-    color: theme.palette.common.white,
+    color: theme.palette.text.primary,
     fontSize: theme.typography.body2.fontSize,
     padding: `0px ${theme.spacing(0.5)}`,
     position: 'absolute',

package/src/utils/statuses.ts

@@ -25,14 +25,20 @@ export const getStatusColors = ({
 }: StatusColorProps): Colors => {
   const { palette } = theme;
 
+  // Typography color for status chips: text action primary (#000000) in light
+  // mode, paper (#212121) in dark mode, so it stays readable on the bright
+  // status backgrounds in both modes.
+  const chipTextColor =
+    palette.mode === 'dark' ? palette.background.paper : palette.text.primary;
+
   const colorMapping = {
     [SeverityCode.High]: {
       backgroundColor: theme.palette.statusBackground.error,
-      color: palette.error.contrastText
+      color: chipTextColor
     },
     [SeverityCode.Medium]: {
       backgroundColor: theme.palette.statusBackground.warning,
-      color: palette.warning.contrastText
+      color: chipTextColor
     },
     [SeverityCode.Low]: {
       backgroundColor: theme.palette.statusBackground.unknown,
@@ -40,11 +46,11 @@ export const getStatusColors = ({
     },
     [SeverityCode.Pending]: {
       backgroundColor: theme.palette.statusBackground.pending,
-      color: palette.text.primary
+      color: chipTextColor
     },
     [SeverityCode.OK]: {
       backgroundColor: theme.palette.statusBackground.success,
-      color: palette.text.primary
+      color: chipTextColor
     },
     [SeverityCode.None]: {
       backgroundColor: theme.palette.statusBackground.none,