pfe-2018 Updated togglebox color in default state both color theme wh… #1028
Conversation
PriJoh
requested review from
goldenraphti,
Fastanton,
WMeander,
Joelhagg and
Swahlstrom
|
Size Change: +412 B (+0.04%) Total Size: 1.17 MB
ℹ️ View Unchanged
|
| .showcase-panel.showcase-panel-advanced | ||
| .component-preview | ||
| .component-preview-content:has(input[type="checkbox"].theme-white) { | ||
| background-color: var(--bg-togglebox-theme-white) !important; |
There was a problem hiding this comment.
Denna !important går inte att komma ifrån va? 😜
There was a problem hiding this comment.
if this is 1 single selector, with no comma, then keep it all on the same line
There was a problem hiding this comment.
AND if this rule is about the display of the documentation preview then it should not be specified here (since those rules will be shipped in the npm package) but instead be declared in the LESS file used for the documentation website only (which rules will not be used for the npm package)
-> "src\less\documentation-payex.less"
| .togglebox:has(input.theme-white) input[type="checkbox"]:not(:disabled) + label:after { | ||
| background-color: var(--brand-secondary); | ||
| } | ||
|
|
||
| .togglebox:has(input.theme-white) input[type="checkbox"]:not(:disabled) + label:before { | ||
| background-color: var(--white); | ||
| } | ||
|
|
||
| .togglebox:has(input.theme-white) input[type="checkbox"]:not(:disabled):checked + label:before { | ||
| background-color: var(--brand-success); | ||
| } | ||
|
|
||
| .togglebox:has(input.theme-white) input[type="checkbox"]:not(:disabled):checked + label:after { | ||
| background-color: var(--white); | ||
| } |
There was a problem hiding this comment.
@PriJoh you can make it easier by re-addressing the togglebox custom-properties. This way no need to going through all the selectors again.
e.g.
.togglebox:has(input.theme-white) {
--checked-thumb-color: var(--white);
--checked-track-color: var(--brand-success);
--unchecked-thumb-color: var(--white);
--unchecked-track-color: var(--brand-secondary);
}and doing the same for the gray theme
There was a problem hiding this comment.
I have looked at all the comments and they should now be resolved :)
| @@ -195,6 +195,7 @@ body { | |||
| --bg-grey: var(--brand-secondary-light-2, #c8c8c8); | |||
| --bg-white: #ffffff; | |||
| --bg-quaternary: var(--list-gray, #999999); | |||
| --bg-togglebox-theme-white: #d9d9d9; | |||
There was a problem hiding this comment.
if this rule is only used for documentation and not meant to ever be used by projects consuming the design system then move it to the "documentation-payex.less" file. This way we keep the files shipped cleaner and lighter.
Description
I’ve updated the togglebox colors in the default state for both the white and grey themes.
Motivation and Context
How Has This Been Tested?
Screenshots (if appropriate):
Types of changes
Checklist:
Review instructions
Review instructions