Savi vth forced colors navigation #388
Conversation
savitris
requested review from
bddjong and
AliKdhim87
and removed request for
bddjong and
AliKdhim87
| @@ -153,6 +153,35 @@ a { | |||
| max-width: var(--utrecht-page-content-max-width); | |||
| } | |||
|
|
|||
| @media screen and (-ms-high-contrast: active), screen and (forced-colors: active) { | |||
| .utrecht-accordion__header .utrecht-accordion__button { | |||
| border: 2px solid white; | |||
There was a problem hiding this comment.
Gedaan!
P.S. currentColor is nu currentcolor
There was a problem hiding this comment.
@Robbert
Ik krijg van de Linter dat ik moet currentColor hebben in de code in plaats van currentcolor.
Maar op de MDN site staat er dat nu currentcolor goed is
Mag ik de Linter veranderen zodat het currentcolor goed vindt?
| @@ -153,6 +153,35 @@ a { | |||
| max-width: var(--utrecht-page-content-max-width); | |||
| } | |||
|
|
|||
| @media screen and (-ms-high-contrast: active), screen and (forced-colors: active) { | |||
| .utrecht-accordion__header .utrecht-accordion__button { | |||
There was a problem hiding this comment.
Moet de selector echt zo specifiek zijn, of zou .utrecht-accordion__button ook al werken? Geldt ook voor alle andere selectors hier.
There was a problem hiding this comment.
Nee, als ik de eerste class wegdoe, dan gaat het design kaputt.
There was a problem hiding this comment.
Ik denk dat de accordion style moet worden geüpdate vanuit de designstyle package, zodat ook de VTH dezelfde stijl kan krijgen.
https://github.com/nl-design-system/utrecht/blob/main/components/accordion/css/_mixin.scss
There was a problem hiding this comment.
@Robbert
Wat denk jij?
| } | ||
|
|
||
| @media (prefers-color-scheme: dark) { | ||
| .utrecht-accordion__header .utrecht-accordion__button::after { |
There was a problem hiding this comment.
Misschien kunnen we de icon refactoren naar een <svg> in de HTML, en dan fill="currentColor" gebruiken. Dan hebben we maar 1 SVG nodig en dan kan de CSS veel simpeler blijven.
There was a problem hiding this comment.
Kun je me aanraden de steps om dat te doen. Ik ben niet zeker waar te beginnen. Hoe kan ik de html code van de accordion modificeren vanuit deze repository?
Navigation bar focus ring in forced-color mode
Improved styling for accordion buttons in forced-color mode