From 986a19def6060030549b85387c44af6a4087cd2d Mon Sep 17 00:00:00 2001 From: Liam Simmons Date: Tue, 26 Nov 2024 13:18:29 -0500 Subject: [PATCH 1/6] Fix background colors --- .../playbook/pb_selectable_card/_selectable_card.scss | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) 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..f92dddc44f 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 @@ -149,9 +149,9 @@ $pb_selectable_paddings: ( &.dark { input[type="checkbox"], input[type="radio"] { - &:checked ~ label { + &:checked ~ label ~ enabled { 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; } } From b9e68f11922c67c153741a52cd9afc8240002a50 Mon Sep 17 00:00:00 2001 From: Liam Simmons Date: Tue, 26 Nov 2024 13:26:37 -0500 Subject: [PATCH 2/6] Add dark prop to body --- .../playbook/pb_selectable_card/selectable_card.html.erb | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 %> From 8cf2e99581271e6643e85d082ba5f0cef9880b08 Mon Sep 17 00:00:00 2001 From: Liam Simmons Date: Tue, 26 Nov 2024 14:30:23 -0500 Subject: [PATCH 3/6] remove enabled --- .../pb_kits/playbook/pb_selectable_card/_selectable_card.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 f92dddc44f..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 @@ -149,7 +149,7 @@ $pb_selectable_paddings: ( &.dark { input[type="checkbox"], input[type="radio"] { - &:checked ~ label ~ enabled { + &:checked ~ label { border-width: $pb_card_border_width; outline: 1px solid $primary_action_dark; } From 879947d34be392664719291f7d083c4fbab4d9ed Mon Sep 17 00:00:00 2001 From: Liam Simmons Date: Wed, 27 Nov 2024 09:55:51 -0500 Subject: [PATCH 4/6] Add styling for borders --- .../pb_kits/playbook/pb_selectable_card/_selectable_card.scss | 2 ++ 1 file changed, 2 insertions(+) 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 3a70ad8d22..6be610d16c 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 @@ -174,6 +174,8 @@ $pb_selectable_paddings: ( &:checked ~ label { @include pb_card_selected_dark; background: $bg_dark_card; + border-width: $pb_card_border_width; + outline: 1px solid $primary_action_dark; } } From 429b669db15f3c64da39841341cc85d0213512e5 Mon Sep 17 00:00:00 2001 From: Liam Simmons Date: Wed, 27 Nov 2024 10:17:46 -0500 Subject: [PATCH 5/6] Adjust inner border color for dark mode --- playbook/app/pb_kits/playbook/pb_card/_card_mixin.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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) { From 81afeb408387e7ba278cce588069d1853958e96b Mon Sep 17 00:00:00 2001 From: Liam Simmons Date: Tue, 3 Dec 2024 13:12:42 -0500 Subject: [PATCH 6/6] Fix page jump --- .../pb_kits/playbook/pb_selectable_card/_selectable_card.scss | 2 -- 1 file changed, 2 deletions(-) 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 6be610d16c..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 @@ -174,8 +174,6 @@ $pb_selectable_paddings: ( &:checked ~ label { @include pb_card_selected_dark; background: $bg_dark_card; - border-width: $pb_card_border_width; - outline: 1px solid $primary_action_dark; } }