Viewing File: /usr/local/cpanel/base/frontend/jupiter/theme_configurations/customizations/styles_template.tt

[% IF (primary || accent) %]
body,
cp-footer,
cp-header,
cp-main-menu {
    [% IF primary.rgb %]
    /* Primary Color */
    --cp-primary-r: [% primary.rgb.r %];
    --cp-primary-g: [% primary.rgb.g %];
    --cp-primary-b: [% primary.rgb.b %];
    --cp-primary-color: rgb(
        var(--cp-primary-r),
        var(--cp-primary-g),
        var(--cp-primary-b)
    );

    /* Component-specific color variables */
    --cp-graphic-color: var(--cp-primary-color);

    --cp-primary-opacity-10: rgba(
        var(--cp-primary-r),
        var(--cp-primary-g),
        var(--cp-primary-b),
        0.1);

    --cp-primary-opacity-20: rgba(
        var(--cp-primary-r),
        var(--cp-primary-g),
        var(--cp-primary-b),
        0.2);


    [% IF primary.contrast_color %]
    --cp-primary-contrast-r: [% primary.contrast_color.rgb.r %];
    --cp-primary-contrast-g: [% primary.contrast_color.rgb.g %];
    --cp-primary-contrast-b: [% primary.contrast_color.rgb.b %];
    --cp-primary-contrast-color: rgb(
        var(--cp-primary-contrast-r),
        var(--cp-primary-contrast-g),
        var(--cp-primary-contrast-b)
    );
    --cp-primary-contrast-text: var(--cp-primary-contrast-color);
    [% END %]

    /* Primary Action Color - for interactive UI components Links, Buttons, etc. */
    [%# NOTE: This color may eventually be customizable. For now, the primary-action CSS
    variables are being set to the primary color. To support customization in the future,
    add a Customization API parameter called primary_action and reassign the r, g, b variable accordingly %]
    --cp-primary-action-r: [% primary.rgb.r %];
    --cp-primary-action-g: [% primary.rgb.g %];
    --cp-primary-action-b: [% primary.rgb.b %];
    --cp-primary-action-color: rgb(
        var(--cp-primary-action-r),
        var(--cp-primary-action-g),
        var(--cp-primary-action-b)
    );

    /* Darken primary action color by 15% for hover effects */
    --cp-primary-action-color-hover: rgb(
        calc(var(--cp-primary-action-r) * 0.85),
        calc(var(--cp-primary-action-g) * 0.85),
        calc(var(--cp-primary-action-b) * 0.85)
    );

    /* Faded color variants */
    --cp-primary-action-opacity-10: rgba(
        var(--cp-primary-r),
        var(--cp-primary-g),
        var(--cp-primary-b),
        0.1
    );

    --cp-primary-action-opacity-20: rgba(
        var(--cp-primary-r),
        var(--cp-primary-g),
        var(--cp-primary-b),
        0.2
    );

    --cp-primary-action-opacity-60: rgba(
        var(--cp-primary-r),
        var(--cp-primary-g),
        var(--cp-primary-b),
        0.6
    );

    [%# NOTE: To support customization in the future, update this condition to check for primary_action.contrast_color %]
    [% IF primary.contrast_color %]
    --cp-primary-action-contrast-text: var(--cp-primary-contrast-text);
    [% END %]

    [% END %]


    [% IF accent.rgb %]
    /* Accent Color */
    --cp-accent-r: [% accent.rgb.r %];
    --cp-accent-g: [% accent.rgb.g %];
    --cp-accent-b: [% accent.rgb.b %];
    --cp-accent-color: rgb(
        var(--cp-accent-r),
        var(--cp-accent-g),
        var(--cp-accent-b)
    );
    [% END %]
}
[% END %]