@porsche-design-system/components-js/ag-grid/esm/parts/toggle-button-styles.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 { createPart } from 'ag-grid-community';
import { themeLightNotificationSuccess, themeLightBackgroundBase, themeLightPrimary, themeLightSuccessColorDarken, themeLightContrastMedium, themeLightStateDisabled, themeDarkNotificationSuccess, themeDarkBackgroundBase, themeDarkPrimary, themeDarkSuccessColorDarken, themeDarkContrastMedium, themeDarkStateDisabled, borderWidthBase, spacingStaticXSmall } from '../styles.mjs';
import { pdsThemeModeDark } from '../types/theme-mode.mjs';

const toggleButtonStyle = createPart({
    feature: 'toggleButtonStyle',
    params: {
        toggleButtonOnBackgroundColor: themeLightNotificationSuccess,
        toggleButtonOffBackgroundColor: themeLightBackgroundBase,
        toggleButtonSwitchBackgroundColor: themeLightPrimary,
        toggleButtonOnHoverBackgroundColor: themeLightSuccessColorDarken,
        toggleButtonOnBorderColor: themeLightNotificationSuccess,
        toggleButtonOnHoverBorderColor: themeLightSuccessColorDarken,
        toggleButtonOffHoverBorderColor: themeLightPrimary,
        toggleButtonOffBorderColor: themeLightContrastMedium,
        toggleButtonDisabledColor: themeLightStateDisabled,
    },
    modeParams: {
        [pdsThemeModeDark]: {
            toggleButtonOnBackgroundColor: themeDarkNotificationSuccess,
            toggleButtonOffBackgroundColor: themeDarkBackgroundBase,
            toggleButtonSwitchBackgroundColor: themeDarkPrimary,
            toggleButtonOnHoverBackgroundColor: themeDarkSuccessColorDarken,
            toggleButtonOnBorderColor: themeDarkNotificationSuccess,
            toggleButtonOnHoverBorderColor: themeDarkSuccessColorDarken,
            toggleButtonOffHoverBorderColor: themeDarkPrimary,
            toggleButtonOffBorderColor: themeDarkContrastMedium,
            toggleButtonDisabledColor: themeDarkStateDisabled,
        },
    },
    css: `
    .ag-toggle-button-input-wrapper {
        border: ${borderWidthBase} solid var(--ag-toggle-button-off-border-color);
        position: relative;

        &::before {
            height: calc(var(--ag-toggle-button-height) - ${spacingStaticXSmall} * 2) !important;
            width: calc(var(--ag-toggle-button-height) - ${spacingStaticXSmall} * 2) !important;
            top: calc(${spacingStaticXSmall} - ${borderWidthBase}) !important;
            left: calc(${spacingStaticXSmall} - ${borderWidthBase}) !important;
        }

        &.ag-checked {
            border-color: var(--ag-toggle-button-on-border-color);

            &::before {
                --ag-toggle-button-switch-background-color: ${themeLightBackgroundBase};
                --ag-toggle-button-on-border-color: ${themeLightBackgroundBase};
                left: calc(100% - var(--ag-toggle-button-height) + 6px) !important;
            }
        }

        &:not(.ag-disabled):hover {
            border-color: var(--ag-toggle-button-off-hover-border-color);
        }

        &.ag-checked:not(.ag-disabled):hover {
            border-color: var(--ag-toggle-button-on-hover-border-color);
            background-color: var(--ag-toggle-button-on-hover-background-color);
        }

        &.ag-disabled {
            opacity: 1 !important;
            border-color: var(--ag-toggle-button-disabled-color);

            &:hover input {
                cursor: not-allowed;
            }

            &:not(.ag-checked)::before {
                background-color: var(--ag-toggle-button-disabled-color);
            }

            &.ag-checked {
                background-color: var(--ag-toggle-button-disabled-color);
            }
        }
    }
  `,
});

export { toggleButtonStyle };