bez3788
May 6, 2024, 6:59pm
1
I’ve added the gform_stripe_elements_style hook filter to my child theme functions.php and it is not working. My form is using Orbital Theme and set to Orbital theme in default settings as well.
As suggested here
add_filter( 'gform_stripe_elements_style', 'set_stripe_styles', 100, 2 );
function set_stripe_styles( $cardStyles, $formId ) {
$styles = gf_stripe()->theme_layer_third_party_styles( $formId, array(), array( 'theme' => 'orbital' ) );
$styles['base']['iconColor'] = 'var(--cs-color-primary)';
$styles['base']['colorText'] = 'var(--cs-color-primary)';
$styles['base']['colorBackground'] = 'var(--cs-layout-background)';
$styles['base']['::focus']['borderColor'] = 'purple';
return $styles;
}
bez3788
May 6, 2024, 8:04pm
2
Is this the correct format for $styles to return?
Array
(
[labels] => floating
[theme] => stripe
[variables] => Array
(
[borderRadius] => --gf-ctrl-radius
[colorBackground] => --gf-ctrl-bg-color
[colorBackgroundText] => --gf-ctrl-color
[colorIcon] => --gf-ctrl-color
[colorIconCardCvc] => --gf-ctrl-color
[colorIconCardCvcError] => --gf-color-danger
[colorIconCardError] => --gf-color-danger
[colorIconTab] => --gf-ctrl-btn-icon-color-secondary
[colorIconTabHover] => --gf-ctrl-btn-icon-color-hover-secondary
[colorIconTabSelected] => --gf-ctrl-btn-color-secondary
[colorIconTabMore] => --gf-ctrl-btn-icon-color-secondary
[colorIconTabMoreHover] => --gf-ctrl-btn-icon-color-hover-secondary
[colorIconMenu] => --gf-ctrl-color
[colorPrimary] => --gf-color-primary
[colorPrimaryText] => --gf-color-primary-contrast
[colorDanger] => --gf-color-danger
[colorDangerText] => --gf-color-danger-contrast
[colorSuccess] => --gf-color-success
[colorSuccessText] => --gf-color-success-contrast
[colorText] => --gf-ctrl-color
[colorTextPlaceholder] => --gf-ctrl-placeholder-color
[colorTextSecondary] => --gf-ctrl-color
[fontFamily] => --gf-font-family-base
[fontSizeBase] => 16px
[fontSmooth] => --gf-ctrl-font-smoothing
[spacingGridRow] => --gf-field-gap-y
[spacingGridColumn] => --gf-field-gap-x
)
[rules] => Array
(
[.Input] => Array
(
[borderColor] => --gf-ctrl-border-color
[borderWidth] => --gf-ctrl-border-width
[borderStyle] => --gf-ctrl-border-style
[color] => --gf-ctrl-color
[fontWeight] => --gf-ctrl-font-weight
[fontSize] => --gf-ctrl-font-size
[letterSpacing] => --gf-ctrl-letter-spacing
)
[.Input:hover] => Array
(
[backgroundColor] => --gf-ctrl-bg-color-hover
[borderColor] => --gf-ctrl-border-color-hover
[color] => --gf-ctrl-color-hover
)
[.Input:hover:focus] => Array
(
[backgroundColor] => --gf-ctrl-bg-color-focus
[borderColor] => --gf-ctrl-border-color-focus
[boxShadow] => --gf-ctrl-shadow-focus
[color] => --gf-ctrl-color-focus
)
[.Input:focus] => Array
(
[backgroundColor] => --gf-ctrl-bg-color-focus
[borderColor] => --gf-ctrl-border-color-focus
[boxShadow] => --gf-ctrl-shadow-focus
[color] => --gf-ctrl-color-focus
)
[.Input:disabled] => Array
(
[backgroundColor] => --gf-ctrl-bg-color-disabled
[borderColor] => --gf-ctrl-border-color-disabled
[color] => --gf-ctrl-color-disabled
)
[.Input:disabled:hover] => Array
(
[backgroundColor] => --gf-ctrl-bg-color-disabled
[borderColor] => --gf-ctrl-border-color-disabled
[color] => --gf-ctrl-color-disabled
)
[.Input--invalid] => Array
(
[backgroundColor] => --gf-ctrl-bg-color-error
[borderColor] => --gf-ctrl-border-color-error
[boxShadow] => 0
[color] => --gf-ctrl-color-error
)
[.Input--invalid:hover] => Array
(
[borderColor] => --gf-ctrl-border-color-error
)
[.Input::placeholder] => Array
(
[fontFamily] => --gf-ctrl-placeholder-font-family
[fontSize] => --gf-ctrl-placeholder-font-size
[fontWeight] => --gf-ctrl-placeholder-font-weight
[letterSpacing] => --gf-ctrl-placeholder-letter-spacing
)
[.CodeInput] => Array
(
[borderColor] => --gf-ctrl-border-color
[borderWidth] => --gf-ctrl-border-width
[borderStyle] => --gf-ctrl-border-style
[color] => --gf-ctrl-color
[fontWeight] => --gf-ctrl-font-weight
[fontSize] => --gf-ctrl-font-size
[letterSpacing] => --gf-ctrl-letter-spacing
)
[.CodeInput:focus] => Array
(
[backgroundColor] => --gf-ctrl-bg-color-focus
[borderColor] => --gf-ctrl-border-color-focus
[boxShadow] => --gf-ctrl-shadow-focus
[color] => --gf-ctrl-color-focus
)
[.CheckboxInput] => Array
(
[borderColor] => --gf-ctrl-border-color
[borderWidth] => --gf-ctrl-border-width
[borderStyle] => --gf-ctrl-border-style
[borderRadius] => --gf-ctrl-checkbox-check-radius
)
[.CheckboxInput:hover] => Array
(
[backgroundColor] => --gf-ctrl-bg-color-hover
[borderColor] => --gf-ctrl-border-color-hover
)
[.CheckboxInput--checked:hover] => Array
(
[backgroundColor] => --gf-ctrl-bg-color
[borderColor] => --gf-ctrl-border-color
)
[.Error] => Array
(
[color] => --gf-ctrl-desc-color-error
[fontFamily] => --gf-ctrl-desc-font-family-error
[fontSize] => --gf-ctrl-desc-font-size-error
[fontWeight] => --gf-ctrl-desc-font-weight-error
[letterSpacing] => --gf-ctrl-desc-letter-spacing-error
[lineHeight] => --gf-ctrl-desc-line-height-error
[marginTop] => --gf-desc-space
)
[.Label--resting] => Array
(
[color] => --gf-ctrl-placeholder-color
[fontFamily] => --gf-ctrl-placeholder-font-family
[fontSize] => --gf-ctrl-placeholder-font-size
[fontWeight] => --gf-ctrl-placeholder-font-weight
[letterSpacing] => --gf-ctrl-placeholder-letter-spacing
[opacity] => --gf-ctrl-placeholder-opacity
)
[.Label--floating] => Array
(
[color] => --gf-ctrl-color
[fontFamily] => --gf-ctrl-placeholder-font-family
[fontWeight] => --gf-ctrl-label-font-weight-primary
[letterSpacing] => --gf-ctrl-placeholder-letter-spacing
)
[.Tab] => Array
(
[backgroundColor] => --gf-ctrl-button-bg-color-secondary
[borderColor] => --gf-ctrl-button-border-color-secondary
[borderWidth] => --gf-ctrl-button-border-width-secondary
[borderStyle] => --gf-ctrl-button-border-style-secondary
[color] => --gf-ctrl-button-color-secondary
)
[.Tab:hover] => Array
(
[backgroundColor] => --gf-ctrl-btn-bg-color-hover-secondary
[borderColor] => --gf-ctrl-btn-border-color-hover-secondary
[color] => --gf-ctrl-btn-color-hover-secondary
)
[.Tab:focus] => Array
(
[backgroundColor] => --gf-ctrl-btn-bg-color-focus-secondary
[borderColor] => --gf-ctrl-btn-border-color-focus-secondary
[boxShadow] => --gf-ctrl-shadow-focus
[color] => --gf-ctrl-btn-color-focus-secondary
)
[.Tab:disabled] => Array
(
[backgroundColor] => --gf-ctrl-btn-bg-color-disabled-secondary
[borderColor] => --gf-ctrl-btn-border-color-disabled-secondary
[color] => --gf-ctrl-btn-color-disabled-secondary
)
[.Tab--selected] => Array
(
[borderColor] => --gf-ctrl-btn-border-color-focus-secondary
[color] => --gf-ctrl-btn-color-secondary
)
[.Tab--selected:hover] => Array
(
[borderColor] => --gf-ctrl-btn-border-color-focus-secondary
[color] => --gf-ctrl-btn-color-secondary
)
[.Tab--selected:focus] => Array
(
[borderColor] => --gf-ctrl-btn-border-color-focus-secondary
[boxShadow] => --gf-ctrl-shadow-focus
[color] => --gf-ctrl-btn-color-secondary
)
[.RedirectText] => Array
(
[color] => --gf-color-primary
[fontFamily] => --gf-ctrl-desc-font-family
[fontSize] => --gf-ctrl-desc-font-size
[fontWeight] => --gf-ctrl-desc-font-weight
[letterSpacing] => --gf-ctrl-desc-letter-spacing
[lineHeight] => --gf-ctrl-desc-line-height
)
[.PickerItem--new] => Array
(
[color] => --gf-ctrl-color
)
[.TermsText] => Array
(
[color] => --gf-ctrl-desc-color
)
[.TermsLink] => Array
(
[color] => --gf-ctrl-desc-color
)
[.Block] => Array
(
[borderRadius] => --gf-ctrl-radius-max-lg
)
)
[base] => Array
(
[iconColor] => var(--cs-color-primary)
[colorText] => #f6a30a
[colorBackground] => #f6a30a
[::focus] => Array
(
[borderColor] => #f6a30a
)
)
)
bez3788
May 6, 2024, 9:54pm
3
I’m not sure why the docs tell you to use an array format of [‘base’][‘styleVariable’]. If someone could point out why, that would be great. I found the below to work, included all variables, you only need the ones you want to modify. Still won’t work with light/dark mode css switch.
add_filter( 'gform_stripe_elements_style', 'set_stripe_styles', 10, 2 );
function set_stripe_styles( $cardStyles, $formId ) {
$styles = gf_stripe()->theme_layer_third_party_styles( $formId, array(), array( 'theme' => 'orbital' ) );
$styles['labels'] = 'floating';
$styles['theme'] = 'stripe';
$styles['variables']['borderRadius'] = '--gf-ctrl-radius';
$styles['variables']['colorBackground'] = '--gf-ctrl-bg-color';
$styles['variables']['colorBackgroundText'] = '--gf-ctrl-color';
$styles['variables']['colorIcon'] = '--gf-ctrl-color';
$styles['variables']['colorIconCardCvc'] = '--gf-ctrl-color';
$styles['variables']['colorIconCardCvcError'] = '--gf-color-danger';
$styles['variables']['colorIconCardError'] = '--gf-color-danger';
$styles['variables']['colorIconTab'] = '--gf-ctrl-btn-icon-color-secondary';
$styles['variables']['colorIconTabHover'] = '--gf-ctrl-btn-icon-color-hover-secondary';
$styles['variables']['colorIconTabSelected'] = '--gf-ctrl-btn-color-secondary';
$styles['variables']['colorIconTabMore'] = '--gf-ctrl-btn-icon-color-secondary';
$styles['variables']['colorIconTabMoreHover'] = '--gf-ctrl-btn-icon-color-hover-secondary';
$styles['variables']['colorIconMenu'] = '--gf-ctrl-color';
$styles['variables']['colorPrimary'] = '--gf-color-primary';
$styles['variables']['colorPrimaryText'] = '--gf-color-primary-contrast';
$styles['variables']['colorDanger'] = '--gf-color-danger';
$styles['variables']['colorDangerText'] = '--gf-color-danger-contrast';
$styles['variables']['colorSuccess'] = '--gf-color-success';
$styles['variables']['colorSuccessText'] = '--gf-color-success-contrast';
$styles['variables']['colorText'] = '--gf-ctrl-color';
$styles['variables']['colorTextPlaceholder'] = '--gf-ctrl-placeholder-color';
$styles['variables']['colorTextSecondary'] = '--gf-ctrl-color';
$styles['variables']['fontFamily'] = '--gf-font-family-base';
$styles['variables']['fontSizeBase'] = '16px';
$styles['variables']['fontSmooth'] = '--gf-ctrl-font-smoothing';
$styles['variables']['spacingGridRow'] = '--gf-field-gap-y';
$styles['variables']['spacingGridColumn'] = '--gf-field-gap-x';
$styles['rules']['.Input']['borderColor'] = '--gf-ctrl-border-color';
$styles['rules']['.Input']['borderWidth'] = '0px';
$styles['rules']['.Input']['borderStyle'] = '--gf-ctrl-border-style';
$styles['rules']['.Input']['color'] = '--gf-ctrl-color';
$styles['rules']['.Input']['fontWeight'] = '--gf-ctrl-font-weight';
$styles['rules']['.Input']['fontSize'] = '--gf-ctrl-font-size';
$styles['rules']['.Input']['letterSpacing'] = '--gf-ctrl-letter-spacing';
$styles['rules']['.Input:hover']['backgroundColor'] = '--gf-ctrl-bg-color-hover';
$styles['rules']['.Input:hover']['borderColor'] = '--gf-ctrl-border-color-hover';
$styles['rules']['.Input:hover']['color'] = '--gf-ctrl-color-hover';
$styles['rules']['.Input:hover:focus']['backgroundColor'] = '--gf-ctrl-bg-color-focus';
$styles['rules']['.Input:hover:focus']['borderColor'] = '--gf-ctrl-border-color-focus';
$styles['rules']['.Input:hover:focus']['boxShadow'] = '--gf-ctrl-shadow-focus';
$styles['rules']['.Input:hover:focus']['color'] = '--gf-ctrl-color-focus';
$styles['rules']['.Input:focus']['backgroundColor'] = '--gf-ctrl-bg-color-focus';
$styles['rules']['.Input:focus']['borderColor'] = '--gf-ctrl-border-color-focus';
$styles['rules']['.Input:focus']['boxShadow'] = '--gf-ctrl-shadow-focus';
$styles['rules']['.Input:focus']['color'] = '--gf-ctrl-color-focus';
$styles['rules']['.Input:disabled']['backgroundColor'] = '--gf-ctrl-bg-color-disabled';
$styles['rules']['.Input:disabled']['borderColor'] = '--gf-ctrl-border-color-disabled';
$styles['rules']['.Input:disabled']['color'] = '--gf-ctrl-color-disabled';
$styles['rules']['.Input:disabled:hover']['backgroundColor'] = '--gf-ctrl-bg-color-disabled';
$styles['rules']['.Input:disabled:hover']['borderColor'] = '--gf-ctrl-border-color-disabled';
$styles['rules']['.Input:disabled:hover']['color'] = '--gf-ctrl-color-disabled';
$styles['rules']['.Input--invalid']['backgroundColor'] = '--gf-ctrl-bg-color-error';
$styles['rules']['.Input--invalid']['borderColor'] = '--gf-ctrl-border-color-error';
$styles['rules']['.Input--invalid']['boxShadow'] = '0';
$styles['rules']['.Input--invalid']['color'] = '--gf-ctrl-color-error';
$styles['rules']['.Input--invalid:hover']['borderColor'] = '--gf-ctrl-border-color-error';
$styles['rules']['.Input::placeholder']['fontFamily'] = '--gf-ctrl-placeholder-font-family';
$styles['rules']['.Input::placeholder']['fontSize'] = '--gf-ctrl-placeholder-font-size';
$styles['rules']['.Input::placeholder']['fontWeight'] = '--gf-ctrl-placeholder-font-weight';
$styles['rules']['.Input::placeholder']['letterSpacing'] = '--gf-ctrl-placeholder-letter-spacing';
$styles['rules']['.CodeInput']['borderColor'] = '--gf-ctrl-border-color';
$styles['rules']['.CodeInput']['borderWidth'] = '--gf-ctrl-border-width';
$styles['rules']['.CodeInput']['borderStyle'] = '--gf-ctrl-border-style';
$styles['rules']['.CodeInput']['color'] = '--gf-ctrl-color';
$styles['rules']['.CodeInput']['fontWeight'] = '--gf-ctrl-font-weight';
$styles['rules']['.CodeInput']['fontSize'] = '--gf-ctrl-font-size';
$styles['rules']['.CodeInput']['letterSpacing'] = '--gf-ctrl-letter-spacing';
$styles['rules']['.CodeInput:focus']['backgroundColor'] = '--gf-ctrl-bg-color-focus';
$styles['rules']['.CodeInput:focus']['borderColor'] = '--gf-ctrl-border-color-focus';
$styles['rules']['.CodeInput:focus']['boxShadow'] = '--gf-ctrl-shadow-focus';
$styles['rules']['.CodeInput:focus']['color'] = '--gf-ctrl-color-focus';
$styles['rules']['.CheckboxInput']['borderColor'] = '--gf-ctrl-border-color';
$styles['rules']['.CheckboxInput']['borderWidth'] = '--gf-ctrl-border-width';
$styles['rules']['.CheckboxInput']['borderStyle'] = '--gf-ctrl-border-style';
$styles['rules']['.CheckboxInput']['borderRadius'] = '--gf-ctrl-checkbox-check-radius';
$styles['rules']['.CheckboxInput:hover']['backgroundColor'] = '--gf-ctrl-bg-color-hover';
$styles['rules']['.CheckboxInput:hover']['borderColor'] = '--gf-ctrl-border-color-hover';
$styles['rules']['.CheckboxInput--checked:hover']['backgroundColor'] = '--gf-ctrl-bg-color';
$styles['rules']['.CheckboxInput--checked:hover']['borderColor'] = '--gf-ctrl-border-color';
$styles['rules']['.Error']['color'] = '--gf-ctrl-desc-color-error';
$styles['rules']['.Error']['fontFamily'] = '--gf-ctrl-desc-font-family-error';
$styles['rules']['.Error']['fontSize'] = '--gf-ctrl-desc-font-size-error';
$styles['rules']['.Error']['fontWeight'] = '--gf-ctrl-desc-font-weight-error';
$styles['rules']['.Error']['letterSpacing'] = '--gf-ctrl-desc-letter-spacing-error';
$styles['rules']['.Error']['lineHeight'] = '--gf-ctrl-desc-line-height-error';
$styles['rules']['.Error']['marginTop'] = '--gf-desc-space';
$styles['rules']['.Label--resting']['color'] = '--gf-ctrl-placeholder-color';
$styles['rules']['.Label--resting']['fontFamily'] = '--gf-ctrl-placeholder-font-family';
$styles['rules']['.Label--resting']['fontSize'] = '--gf-ctrl-placeholder-font-size';
$styles['rules']['.Label--resting']['fontWeight'] = '--gf-ctrl-placeholder-font-weight';
$styles['rules']['.Label--resting']['letterSpacing'] = '--gf-ctrl-placeholder-letter-spacing';
$styles['rules']['.Label--resting']['opacity'] = '--gf-ctrl-placeholder-opacity';
$styles['rules']['.Label--floating']['color'] = '--gf-ctrl-color';
$styles['rules']['.Label--floating']['fontFamily'] = '--gf-ctrl-placeholder-font-family';
$styles['rules']['.Label--floating']['fontWeight'] = '--gf-ctrl-label-font-weight-primary';
$styles['rules']['.Label--floating']['letterSpacing'] = '--gf-ctrl-placeholder-letter-spacing';
$styles['rules']['.Tab']['backgroundColor'] = '--gf-ctrl-button-bg-color-secondary';
$styles['rules']['.Tab']['borderColor'] = '--gf-ctrl-button-border-color-secondary';
$styles['rules']['.Tab']['borderWidth'] = '--gf-ctrl-button-border-width-secondary';
$styles['rules']['.Tab']['borderStyle'] = '--gf-ctrl-button-border-style-secondary';
$styles['rules']['.Tab']['color'] = '--gf-ctrl-button-color-secondary';
$styles['rules']['.Tab:hover']['backgroundColor'] = '--gf-ctrl-btn-bg-color-hover-secondary';
$styles['rules']['.Tab:hover']['borderColor'] = '--gf-ctrl-btn-border-color-hover-secondary';
$styles['rules']['.Tab:hover']['color'] = '--gf-ctrl-btn-color-hover-secondary';
$styles['rules']['.Tab:focus']['backgroundColor'] = '--gf-ctrl-btn-bg-color-focus-secondary';
$styles['rules']['.Tab:focus']['borderColor'] = '--gf-ctrl-btn-border-color-focus-secondary';
$styles['rules']['.Tab:focus']['boxShadow'] = '--gf-ctrl-shadow-focus';
$styles['rules']['.Tab:focus']['color'] = '--gf-ctrl-btn-color-focus-secondary';
$styles['rules']['.Tab:disabled']['backgroundColor'] = '--gf-ctrl-btn-bg-color-disabled-secondary';
$styles['rules']['.Tab:disabled']['borderColor'] = '--gf-ctrl-btn-border-color-disabled-secondary';
$styles['rules']['.Tab:disabled']['color'] = '--gf-ctrl-btn-color-disabled-secondary';
$styles['rules']['.Tab--selected']['borderColor'] = '--gf-ctrl-btn-border-color-focus-secondary';
$styles['rules']['.Tab--selected']['color'] = '--gf-ctrl-btn-color-secondary';
$styles['rules']['.Tab--selected:hover']['borderColor'] = '--gf-ctrl-btn-border-color-focus-secondary';
$styles['rules']['.Tab--selected:hover']['color'] = '--gf-ctrl-btn-color-secondary';
$styles['rules']['.Tab--selected:focus']['borderColor'] = '--gf-ctrl-btn-border-color-focus-secondary';
$styles['rules']['.Tab--selected:focus']['boxShadow'] = '--gf-ctrl-shadow-focus';
$styles['rules']['.Tab--selected:focus']['color'] = '--gf-ctrl-btn-color-secondary';
$styles['rules']['.RedirectText']['color'] = '--gf-color-primary';
$styles['rules']['.RedirectText']['fontFamily'] = '--gf-ctrl-desc-font-family';
$styles['rules']['.RedirectText']['fontSize'] = '--gf-ctrl-desc-font-size';
$styles['rules']['.RedirectText']['fontWeight'] = '--gf-ctrl-desc-font-weight';
$styles['rules']['.RedirectText']['letterSpacing'] = '--gf-ctrl-desc-letter-spacing';
$styles['rules']['.RedirectText']['lineHeight'] = '--gf-ctrl-desc-line-height';
$styles['rules']['.PickerItem--new']['color'] = '--gf-ctrl-color';
$styles['rules']['.TermsText']['color'] = '--gf-ctrl-desc-color';
$styles['rules']['.TermsLink']['color'] = '--gf-ctrl-desc-color';
$styles['rules']['.Block']['borderRadius'] = '--gf-ctrl-radius-max-lg';
return $styles;
}
system
June 5, 2024, 9:54pm
4
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.