diff --git a/playbook/app/pb_kits/playbook/pb_card/_card_mixin.scss b/playbook/app/pb_kits/playbook/pb_card/_card_mixin.scss index f15d002ee0..c6e150ccd8 100755 --- a/playbook/app/pb_kits/playbook/pb_card/_card_mixin.scss +++ b/playbook/app/pb_kits/playbook/pb_card/_card_mixin.scss @@ -32,7 +32,7 @@ $pb_card_header_colors: map-merge(map-merge($product_colors, $additional_colors) } @mixin pb_card_selected_dark { - @include pb_card_selected($primary_action); + @include pb_card_selected($primary_action_dark); } @mixin pb_card($background: $card_light, $border_color: $border_light) { diff --git a/playbook/app/pb_kits/playbook/pb_selectable_card/_selectable_card.scss b/playbook/app/pb_kits/playbook/pb_selectable_card/_selectable_card.scss index e84ccb6d81..3a70ad8d22 100644 --- a/playbook/app/pb_kits/playbook/pb_selectable_card/_selectable_card.scss +++ b/playbook/app/pb_kits/playbook/pb_selectable_card/_selectable_card.scss @@ -151,7 +151,7 @@ $pb_selectable_paddings: ( input[type="radio"] { &:checked ~ label { border-width: $pb_card_border_width; - outline: 1px solid $primary; + outline: 1px solid $primary_action_dark; } } } @@ -161,11 +161,11 @@ $pb_selectable_paddings: ( color: $white; > label { @include pb_card_dark; - background: transparent; + background: $bg_dark_card; .pb_selectable_card_circle { border-color: $bg_dark; - background: $primary-action; + background: $primary_action_dark; } } @@ -173,7 +173,7 @@ $pb_selectable_paddings: ( input[type="radio"] { &:checked ~ label { @include pb_card_selected_dark; - background: transparent; + background: $bg_dark_card; } } diff --git a/playbook/app/pb_kits/playbook/pb_selectable_card/selectable_card.html.erb b/playbook/app/pb_kits/playbook/pb_selectable_card/selectable_card.html.erb index e3f997a773..d6c5739e78 100644 --- a/playbook/app/pb_kits/playbook/pb_selectable_card/selectable_card.html.erb +++ b/playbook/app/pb_kits/playbook/pb_selectable_card/selectable_card.html.erb @@ -35,7 +35,7 @@ <% end %> <% else %> <% if content.nil? %> - <%= pb_rails("body", props: { text: object.text }) %> + <%= pb_rails("body", props: { text: object.text, dark: object.dark }) %> <% else %> <%= content %> <% end %>