@porsche-design-system/components-js/ag-grid/esm/core/theme.mjs

Porsche Design System is a component library designed to help developers create the best experience for software or services distributed by Dr. Ing. h.c. F. Porsche AG.

import { themeQuartz } from 'ag-grid-community';
import { checkboxStyle } from '../parts/checkbox-styles.mjs';
import { pdsSvgIcons } from '../parts/icon-set.mjs';
import { toggleButtonStyle } from '../parts/toggle-button-styles.mjs';
import { borderRadiusSmall, borderRadiusMedium, fontFamily, fontSizeTextSmall, fontWeightSemiBold, fontSizeTextXSmall, themeLightNotificationInfo, themeLightBackgroundBase, themeLightPrimary, themeLightBackgroundSurface, themeLightBackgroundSurfaceDarken, themeLightBackgroundFrosted, themeLightStateHover, themeLightStateFocus, themeLightContrastLow, themeLightContrastMedium, themeLightNotificationError, themeLightStateDisabled, themeDarkNotificationInfo, themeDarkBackgroundBase, themeDarkPrimary, themeDarkBackgroundSurface, themeDarkBackgroundSurfaceDarken, themeDarkBackgroundFrosted, themeDarkStateHover, themeDarkStateFocus, themeDarkContrastLow, themeDarkContrastMedium, themeDarkNotificationError, themeDarkStateDisabled } from '../styles.mjs';
import { pdsThemeModeDark } from '../types/theme-mode.mjs';

const pdsTheme = themeQuartz
    .withParams({
    checkboxBorderWidth: 2,
    checkboxBorderRadius: borderRadiusSmall,
    focusShadow: 'none',
    inputFocusShadow: 'none',
    spacing: 10,
    toggleButtonHeight: 28,
    toggleButtonWidth: 48,
    iconSize: 24,
    borderRadius: borderRadiusSmall,
    wrapperBorderRadius: borderRadiusMedium,
    fontFamily: fontFamily,
    fontSize: fontSizeTextSmall,
    headerFontWeight: fontWeightSemiBold,
    headerFontSize: fontSizeTextXSmall,
    headerHeight: 'calc(var(--ag-font-size) + var(--ag-spacing) * 2.9)',
    rowHeight: 'calc(var(--ag-font-size) + var(--ag-spacing) * 4)',
    toggleButtonSwitchInset: 3,
    browserColorScheme: 'light',
    accentColor: themeLightNotificationInfo,
    backgroundColor: themeLightBackgroundBase,
    foregroundColor: themeLightPrimary,
    headerBackgroundColor: themeLightBackgroundSurface,
    selectedRowBackgroundColor: themeLightBackgroundSurfaceDarken,
    oddRowBackgroundColor: themeLightBackgroundSurface,
    modalOverlayBackgroundColor: themeLightBackgroundFrosted,
    rowHoverColor: themeLightStateHover,
    columnHoverColor: themeLightStateHover,
    rangeSelectionBorderColor: themeLightStateFocus,
    borderColor: themeLightContrastLow,
    inputBorder: `1px solid ${themeLightContrastMedium}`,
    inputInvalidBorder: `1px solid ${themeLightNotificationError}`,
    inputDisabledBorder: `1px solid ${themeLightStateDisabled}`,
    inputDisabledBackgroundColor: themeLightBackgroundBase,
    invalidColor: themeLightNotificationError,
    inputFocusBorder: `1px solid ${themeLightPrimary}`,
})
    .withParams({
    browserColorScheme: 'dark',
    accentColor: themeDarkNotificationInfo,
    backgroundColor: themeDarkBackgroundBase,
    foregroundColor: themeDarkPrimary,
    headerBackgroundColor: themeDarkBackgroundSurface,
    selectedRowBackgroundColor: themeDarkBackgroundSurfaceDarken,
    oddRowBackgroundColor: themeDarkBackgroundSurface,
    modalOverlayBackgroundColor: themeDarkBackgroundFrosted,
    rowHoverColor: themeDarkStateHover,
    columnHoverColor: themeDarkStateHover,
    rangeSelectionBorderColor: themeDarkStateFocus,
    borderColor: themeDarkContrastLow,
    inputBorder: `1px solid ${themeDarkContrastMedium}`,
    inputInvalidBorder: `1px solid ${themeDarkNotificationError}`,
    inputDisabledBorder: `1px solid ${themeDarkStateDisabled}`,
    inputDisabledBackgroundColor: themeDarkBackgroundBase,
    invalidColor: themeDarkNotificationError,
    inputFocusBorder: `1px solid ${themeDarkPrimary}`,
}, pdsThemeModeDark)
    .withPart(pdsSvgIcons)
    .withPart(toggleButtonStyle)
    .withPart(checkboxStyle);

export { pdsTheme };