Feature/pfe 1828 update radio checkmarks dg

[PriJoh]

Description

I have fixed the radio button so it now have a black circle SVG and I also corrected the hover color.

I have also adjusted the checkmarks to have the correct color, background color, and hover state in default, hover, and disabled modes.

I had to use !important on most of the styles because otherwise, it would inherit everything from Swedbank Pay across multiple levels if I didn't use it.

( I'm not sure why I can't see the correct font-family in my branch but in the develop branch it's correct, so I hope it will be correct when the updates gets in there)

Motivation and Context

How Has This Been Tested?

Screenshots (if appropriate):

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)

Checklist:

• My code follows the code style of this project.
• My change requires a change to the documentation.
• I have updated the documentation accordingly.
• I have read the CONTRIBUTING document.
• I have updated the CHANGELOG document.
• I have added tests to cover my changes.
• All new and existing tests passed.

Review instructions

Review instructions

[github-actions]

Size Change: +674 B (+0.06%)

Total Size: 1.16 MB

Filename	Size	Change
dist/designguide/styles/payex.css	52.1 kB	+330 B (+0.64%)
dist/styles/payex.css	52.1 kB	+330 B (+0.64%)

ℹ️ View Unchanged

Filename	Size	Change
dist/designguide/scripts/dg-dashboard.js	73.2 kB	0 B
dist/designguide/scripts/dg.js	24.9 kB	0 B
dist/designguide/styles/documentation-payex.css	10.1 kB	+7 B (+0.07%)
dist/designguide/styles/documentation-swedbankpay.css	9.19 kB	0 B
dist/designguide/styles/swedbankpay.css	49.1 kB	0 B
dist/scripts/3563.js	72.1 kB	0 B
dist/scripts/dg-dashboard.js	73.2 kB	0 B
dist/scripts/dg.js	24.9 kB	0 B
dist/scripts/payex.js	325 kB	0 B
dist/scripts/swedbankpay.js	325 kB	0 B
dist/styles/documentation-payex.css	10.1 kB	+7 B (+0.07%)
dist/styles/documentation-swedbankpay.css	9.19 kB	0 B
dist/styles/swedbankpay.css	49.1 kB	0 B

_{compressed-size-action}

[goldenraphti]

try adding .radio to the selector, this way you're adding teh same specificity than in the "base" css file for radio component, and therefore it might likely decrease a lot the need for using !important in your declarations

So either by adding the .radio selector before .checkmark ( = .radio.checkmark ) OR by nesting the .checkmark { ... } rule inside the over-arching .radio { ... } parent

[goldenraphti]

why removing outline to replace it by borders ?
If the change is motivated by another reason than the change of color please let meknow, I'm very open to revisit how we style this component, especially if it's because you've spotted some accessibility issues or something like this.

If the change is only to achieve a change of color then I think you can achieve if more easily by only modifying the outline color:

Suggested change

	border: 1px solid var(--gray);
	outline: none !important;
	outline-color: var(--gray);

this goes for teh rest of the file, everywhere outline is changed for border

[goldenraphti]

if only the color is modified on hover, then use a *-color property

e.g.

border-color: var(--gray);

OR if you've switched back to outline:

outline-color: var(--gray);

BUT beyond that:
do we need this declaration?
the [outline/border]-color value is already declared asvar(--gray), so I do not see the reason why adding it.

[goldenraphti]

!important is not needed if you add .radio to the .checkmark selector

Suggested change

	background-color: var(--light-gray) !important;
	color: var(--brand-secondary) !important;
	background-color: var(--light-gray);
	color: var(--brand-secondary);

[goldenraphti]

you can nest it inside the previous rule

Suggested change

	&:is(:hover, :focus-visible) + label:before {
	box-shadow: 0 0 0 0.375rem var(--gray);
	}
	&:checked + label:before {
	background-position: center;
	background-image: url("../../../icons/payex/circlepx.svg");
	}
	}
	}
	.radio input[type=radio][disabled]:checked+label:before {
	background-image: url("../../../icons/payex/circlepx_disabled.svg");
	}
	&:is(:hover, :focus-visible) + label:before {
	box-shadow: 0 0 0 0.375rem var(--gray);
	}
	&:checked + label:before {
	background-position: center;
	background-image: url("../../../icons/payex/circlepx.svg");
	}
	&[disabled]:checked+label:before {
	background-image: url("../../../icons/payex/circlepx_disabled.svg");
	}
	}
	}