edr-platform/apps/edr-freight-web/backoffice/src/pages/dashboard/user-management/iamConfig.ts

import type { DesignConfig } from "@tria-plc/iamui";

import {
  FREIGHT_BRAND,
  FREIGHT_BRAND_LIGHT,
  freightBrand,
} from "@/theme/freight-brand";

export const iamConfig: DesignConfig = {
  brand: {
    appName: "EDR Freight Backoffice",
    logoUrl: "/assets/logo.svg",
  },
  colors: {
    primary: FREIGHT_BRAND,
    primaryForeground: "#ffffff",
    secondary: "#f4f7fb",
    background: "#f7f9fb",
    foreground: "#0f172a",
    border: "#eef1f4",
    muted: "#f1f5f9",
    mutedForeground: "#64748b",
    card: "#ffffff",
    sidebar: "#ffffff",
    danger: "#ef4444",
  },
  typography: {
    fontFamily: "'Outfit', var(--font-sans), system-ui, sans-serif",
    headingFontFamily: "'Outfit', var(--font-sans), system-ui, sans-serif",
    baseFontSize: "15px",
    fontWeight: "500",
  },
  shape: {
    radius: "1rem",
  },
  shadows: {
    card: "0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -16px rgba(15, 23, 42, 0.12)",
    dropdown: "0 12px 30px rgba(15, 23, 42, 0.12)",
    modal: "0 20px 45px rgba(15, 23, 42, 0.2)",
  },
  components: {
    buttonDefaultVariant: "filled",
    inputDefaultSize: "sm",
    inputRadius: "md",
    modalRadius: "lg",
    tableHighlightOnHover: true,
  },
  layout: {
    userManagementView: "classic",
    showTopBar: true as any,
    sidebarWidth: "280px",
    sidebarCollapsedWidth: "80px",
    headerHeight: "80px",
    contentMaxWidth: "none",
    sidebarBackground: "#ffffff",
    sidebarColor: "#475569",
    sidebarMutedColor: "#94a3b8",
    sidebarActiveBackground:
      "linear-gradient(135deg, rgba(45, 191, 149, 0.14) 0%, rgba(27, 158, 122, 0.06) 100%)",
    sidebarActiveColor: FREIGHT_BRAND,
    sidebarHoverBackground: "#f5f7fa",
    sidebarBorder: "#eef1f4",
    sidebarRail: `linear-gradient(180deg, ${FREIGHT_BRAND_LIGHT} 0%, ${FREIGHT_BRAND} 100%)`,
    sidebarBrandLabel: "EDR Freight",
    sidebarBrandSublabel: "Backoffice Console",
    menuBackground: "#ffffff",
    menuActiveColor: FREIGHT_BRAND,
    menuActiveBorderColor: FREIGHT_BRAND,
    menuColor: "#64748b",
    menuHoverColor: "#0f172a",
    modalAccentColor: `linear-gradient(135deg, ${FREIGHT_BRAND_LIGHT} 0%, ${FREIGHT_BRAND} 100%)`,
    modalHeaderBackground: "#ffffff",
    modalHeaderEditBackground: "#ffffff",
    modalIconBackground: freightBrand.mutedBg,
    modalIconColor: FREIGHT_BRAND,
    modalTitleColor: "#0f172a",
    modalFocusColor: FREIGHT_BRAND,
    modalSurface: "#ffffff",
  },
  appearance: {
    colorScheme: "light",
    slots: {
      root: {
        styles: {
          background: "#f7f9fb",
          color: "#0f172a",
          fontFamily: "'Outfit', var(--font-sans), system-ui, sans-serif",
        },
      },
      shell: {
        styles: {
          background: "#f7f9fb",
        },
      },
      content: {
        styles: {
          background: "#f7f9fb",
        },
      },
      page: {
        styles: {
          background: "#ffffff",
          border: "1px solid #eef1f4",
          borderRadius: "24px",
          boxShadow:
            "0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -16px rgba(15, 23, 42, 0.12)",
        },
      },
      card: {
        styles: {
          background: "#ffffff",
          border: "1px solid #eef1f4",
          borderRadius: "20px",
          boxShadow:
            "0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -16px rgba(15, 23, 42, 0.12)",
        },
      },
      sidebar: {
        styles: {
          background: "#ffffff",
          border: "1px solid #eef1f4",
          borderRadius: "16px",
          boxShadow:
            "0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -16px rgba(15, 23, 42, 0.12)",
        },
      },
      "sidebar-brand": {
        styles: {
          minHeight: "80px",
          borderBottom: "1px solid #f1f5f9",
        },
      },
      topbar: {
        styles: {
          background: "#ffffff",
          border: "1px solid #eef1f4",
          borderRadius: "16px",
          boxShadow:
            "0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -16px rgba(15, 23, 42, 0.12)",
        },
      },
      "topbar-panel": {
        styles: {
          background: "#f7f9fb",
          border: "1px solid #eef1f4",
          borderRadius: "12px",
        },
      },
      "topbar-user-summary": {
        styles: {
          borderRadius: "14px",
        },
      },
      table: {
        styles: {
          background: "#ffffff",
          border: "1px solid #eef1f4",
          borderRadius: "20px",
          overflow: "hidden",
        },
      },
      "table-header": {
        styles: {
          background: "#f8fafc",
        },
      },
      modal: {
        styles: {
          borderRadius: "24px",
          overflow: "hidden",
        },
      },
      "modal-header": {
        styles: {
          background: "#ffffff",
          borderBottom: "1px solid #eef1f4",
        },
      },
    },
    customCss: `
      [data-um-app="user-management"] {
        --um-page-gap: 20px;
      }

      [data-um-app="user-management"] h1,
      [data-um-app="user-management"] h2,
      [data-um-app="user-management"] h3,
      [data-um-app="user-management"] h4,
      [data-um-app="user-management"] h5,
      [data-um-app="user-management"] h6 {
        letter-spacing: -0.02em;
        color: #0f172a;
      }

      [data-um-app="user-management"] [data-um-slot="sidebar-item"][aria-current="page"] {
        box-shadow: inset 3px 0 0 ${FREIGHT_BRAND};
      }

      [data-um-app="user-management"] button,
      [data-um-app="user-management"] input,
      [data-um-app="user-management"] select,
      [data-um-app="user-management"] textarea {
        font-family: 'Outfit', var(--font-sans), system-ui, sans-serif;
      }
    `,
  },
};