🔴 Støtte for høykontrast i komponenter (#2680)

* 💄 Accordion tilpasset høykontrast * 💄 Alert tilpasset høykontrast * Legg til tokens for high contrast border og -border width. Tanken er å kunne gjenbruke på tvers av komponenter. * 💄 Tooltip tilpasset høykontrast * 💄 ToggleGroup tilpasset høykontrast * 💄 bedre fargebruk på Accordion * 🐛 Fjernet deprecated systemfarger * 💄 alert-farger * 💄 chat tilpasset høykontrast * ♿ button css for high contrast * ♿ Radio og checkbox høykontrast * ♿ Chips høykontrast * ♿ ConfirmationPanel høykontrast * ♿ Tab høykontrast * ♿ Tabs høykontrast * ♿ Textfield høykontrast * ♿ Textarea høykontrast * ♿ Skeleton høykontrast * ♿ Link høykontrast * ♿ LinkPanel høykontrast * ♿ ExpansionCard høykontrast * ♿ high contrast CSS for select & datepicker / monthpicker * ♿ Loader høykontrast * ♿ dropdown høykontrast * ♿ HelpText høykontrast * ♿ Popover høykontrast * ♿ Switch høykontrast * ♿ high contrast CSS for ReadMore * ♿ high contrast CSS for CopyButton * ♿ high contrast CSS for InternalHeader * ♿ Modal highcontrast * ♿ Search høykontrast * 💄 Timeline tilpasset høykontrast * ♿ high contrast CSS for Stepper * ♿ Combobox høykontrast * Fix "diamond"-shape that should be an "arrow" in Timeline popover * ♿ high contrast CSS for Switch (small tweaks) * ♿ high contrast CSS for Switch (remove unused css) * 🐛 Riktige fokusmarkeringer på radio/checkbox * chips * 🐛 Fikset ToggleGroup høykontrast * 📝 Changeset2 * 🔥 Fjernet high-contrast token fra ds-tokens * ♿ high contrast CSS for checkbox (tweaks) * 🔥 Fjernet disabled-prop på radio-story * Timeline focus in high contrast mode * 🐛 Fikset fokusmarkering på radio/checkbox * 🐛 Highlighting av outline var feil satt på ToggleGroup * 📝 Highlight -> highlight --------- Co-authored-by: Vegard Haugstvedt <it.vegard@gmail.com> Co-authored-by: Julian Nymark <julian.nymark@nav.no> Co-authored-by: Halvor Haugan <halvor.haugan@nav.no>
navikt · Jan 30, 2024 · d3fb3d4 · d3fb3d4
1 parent d734d30
commit d3fb3d4
Show file tree

Hide file tree

Showing 35 changed files with 775 additions and 26 deletions.
diff --git a/.changeset/metal-ads-love.md b/.changeset/metal-ads-love.md
@@ -0,0 +1,6 @@
+---
+"@navikt/ds-react": minor
+"@navikt/ds-css": minor
+---
+
+Høykontrast: Komponenter støtter nå standard høykontrast-modus på Windows
diff --git a/@navikt/core/css/accordion.css b/@navikt/core/css/accordion.css
@@ -74,7 +74,8 @@
 }
 
 .navds-accordion__header:focus-visible {
-  outline: none;
+  outline: 2px solid transparent;
+  outline-offset: 3px;
   box-shadow: var(--a-shadow-focus);
   border-radius: var(--a-border-radius-large);
 }
@@ -185,3 +186,17 @@
     transform: translateY(0);
   }
 }
+
+@media (forced-colors: active) {
+  .navds-accordion__header {
+    border: 1px solid buttonborder;
+    background-color: canvas;
+    color: canvastext;
+  }
+
+  .navds-accordion__header:hover {
+    background-color: canvas;
+    border: 1px solid highlight;
+    color: highlight;
+  }
+}
diff --git a/@navikt/core/css/alert.css b/@navikt/core/css/alert.css
@@ -33,7 +33,7 @@
   font-size: 1.5rem;
   align-self: flex-start;
   height: var(--a-font-line-height-xlarge);
-  background: radial-gradient(circle, var(--a-surface-default) 50%, 0, transparent);
+  background: radial-gradient(circle, var(--a-surface-default) 47%, 0, transparent);
 }
 
 .navds-alert--small > .navds-alert__icon {
@@ -64,7 +64,7 @@
 }
 
 .navds-alert--warning > .navds-alert__icon {
-  background: radial-gradient(circle at 50% 57%, var(--a-surface-default) 32%, 0, transparent);
+  background: radial-gradient(circle at 50% 57%, var(--a-surface-default) 30%, 0, transparent);
   color: var(--ac-alert-icon-warning-color, var(--a-icon-warning));
 }
 
@@ -99,3 +99,11 @@
   flex-flow: row nowrap;
   justify-content: flex-end;
 }
+
+@media (forced-colors: active) {
+  .navds-alert {
+    border: 1px solid canvastext;
+    background-color: canvas;
+    color: canvastext;
+  }
+}
diff --git a/@navikt/core/css/button.css b/@navikt/core/css/button.css
@@ -81,7 +81,8 @@
 }
 
 .navds-button:focus-visible {
-  outline: none;
+  outline: 2px solid transparent;
+  outline-offset: 2px;
   box-shadow: var(--a-shadow-focus);
 }
 
@@ -129,6 +130,16 @@
   background-color: var(--ac-button-primary-bg, var(--__ac-button-primary-bg, var(--a-surface-action)));
   color: var(--ac-button-primary-text, var(--__ac-button-primary-text, var(--a-text-on-action)));
 }
+@media (forced-colors: active) {
+  .navds-button.navds-button--primary {
+    background-color: highlight;
+    color: highlighttext;
+  }
+
+  .navds-button.navds-button--primary span {
+    forced-color-adjust: none;
+  }
+}
 
 .navds-button--primary:hover {
   background-color: var(--ac-button-primary-hover-bg, var(--__ac-button-primary-hover-bg, var(--a-surface-action-hover)));
@@ -139,10 +150,17 @@
 }
 
 .navds-button--primary:focus-visible {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
   box-shadow:
     inset 0 0 0 1px var(--ac-button-primary-focus-border, var(--__ac-button-primary-focus-border, var(--a-surface-default))),
     var(--a-shadow-focus);
 }
+@media (forced-colors: active) {
+  .navds-button--primary:focus-visible {
+    box-shadow: none;
+  }
+}
 
 @supports not selector(:focus-visible) {
   .navds-button--primary:focus {
@@ -478,6 +496,7 @@
   opacity: 0.3;
 }
 
+/* Loader overrides */
 .navds-button .navds-loader .navds-loader__foreground {
   stroke: var(--ac-button-loader-stroke, currentColor);
 }
@@ -486,3 +505,36 @@
 .navds-button--danger .navds-loader .navds-loader__background {
   stroke: var(--ac-button-primary-loader-stroke-bg, rgb(255 255 255 / 0.3));
 }
+
+@media (forced-colors: active) {
+  .navds-button:not(.navds-button--loading):where(:disabled, .navds-button--disabled) {
+    opacity: 1;
+    color: GrayText;
+  }
+
+  .navds-button {
+    border: 1px solid transparent;
+    color: ButtonText;
+    background-color: ButtonFace;
+  }
+
+  .navds-button:hover {
+    background-color: highlighttext;
+    border-color: highlight;
+    color: highlight;
+    box-shadow: none;
+  }
+
+  .navds-button:hover span {
+    forced-color-adjust: none;
+  }
+
+  .navds-button .navds-loader .navds-loader__foreground {
+    stroke: canvas;
+  }
+
+  .navds-button--primary .navds-loader .navds-loader__background,
+  .navds-button--danger .navds-loader .navds-loader__background {
+    stroke: canvastext;
+  }
+}
diff --git a/@navikt/core/css/chat.css b/@navikt/core/css/chat.css
@@ -105,3 +105,16 @@
 .navds-chat--right .navds-chat__top-text--left {
   align-self: flex-start;
 }
+
+@media (forced-colors: active) {
+  .navds-chat__bubble,
+  .navds-chat__avatar {
+    border: 1px solid canvastext;
+    background-color: canvas;
+    color: canvastext;
+  }
+
+  .navds-chat__avatar svg {
+    forced-color-adjust: none;
+  }
+}
diff --git a/@navikt/core/css/chips.css b/@navikt/core/css/chips.css
@@ -191,3 +191,44 @@
 .navds-chips--small .navds-chips--icon-right {
   padding-right: var(--a-spacing-05);
 }
+
+@media (forced-colors: active) {
+  .navds-chips__chip {
+    border: 1px solid transparent;
+  }
+
+  .navds-chips__chip:hover {
+    background-color: highlighttext;
+    color: highlight;
+  }
+
+  .navds-chips__chip:focus-visible {
+    outline: 2px solid transparent;
+    outline-offset: 2px;
+  }
+
+  .navds-chips__chip:where([aria-pressed="true"], :active, :hover) > span {
+    forced-color-adjust: none;
+  }
+
+  .navds-chips__toggle:active {
+    background-color: highlight;
+    color: highlighttext;
+  }
+
+  .navds-chips__toggle[aria-pressed="true"] {
+    background-color: selecteditem;
+    color: selecteditemtext;
+    border: 1px solid selecteditem;
+  }
+
+  .navds-chips__toggle[aria-pressed="true"]:hover {
+    background-color: selecteditemtext;
+    color: selecteditem;
+  }
+
+  .navds-chips__toggle[aria-pressed="true"]:active {
+    background-color: highlight;
+    color: highlighttext;
+  }
+}
diff --git a/@navikt/core/css/copybutton.css b/@navikt/core/css/copybutton.css
@@ -28,6 +28,21 @@
   place-content: center;
 }
 
+@media (forced-colors: active) {
+  .navds-copybutton {
+    background-color: ButtonFace;
+    border-color: ButtonText;
+    border: solid 1px ButtonText;
+    color: ButtonText;
+  }
+
+  .navds-copybutton.navds-copybutton:focus-visible {
+    box-shadow: none;
+    outline: 2px solid highlight;
+    outline-offset: 2px;
+  }
+}
+
 .navds-copybutton--icon-right {
   --__ac-copybutton-padding: var(--a-spacing-3) var(--a-spacing-4) var(--a-spacing-3) var(--a-spacing-5);
 }
@@ -201,3 +216,10 @@
   cursor: not-allowed;
   opacity: 0.3;
 }
+
+@media (forced-colors: active) {
+  .navds-copybutton:where(:disabled) {
+    opacity: 1;
+    border-color: GrayText;
+  }
+}
diff --git a/@navikt/core/css/dropdown.css b/@navikt/core/css/dropdown.css
@@ -58,13 +58,15 @@
 }
 
 .navds-dropdown__item:focus-visible {
-  outline: none;
+  outline: 2px solid transparent;
+  outline-offset: -2px;
   box-shadow: inset 0 0 0 2px var(--a-border-focus);
 }
 
 @supports not selector(:focus-visible) {
   .navds-dropdown__item:focus {
-    outline: none;
+    outline: 2px solid transparent;
+    outline-offset: -2px;
     box-shadow: inset 0 0 0 2px var(--a-border-focus);
   }
 }
@@ -75,3 +77,14 @@
   background: transparent;
   cursor: not-allowed;
 }
+
+@media (forced-colors: active) {
+  .navds-dropdown__item:hover {
+    color: highlight;
+  }
+
+  .navds-dropdown__item:disabled {
+    opacity: 1;
+    color: graytext;
+  }
+}
diff --git a/@navikt/core/css/expansioncard.css b/@navikt/core/css/expansioncard.css
@@ -145,13 +145,13 @@
 }
 
 .navds-expansioncard__header-button:focus-visible {
-  outline: none;
+  outline: 3px solid transparent;
   box-shadow: var(--a-shadow-focus);
 }
 
 @supports not selector(:focus-visible) {
   .navds-expansioncard__header-button:focus {
-    outline: none;
+    outline: 3px solid transparent;
     box-shadow: var(--a-shadow-focus);
   }
 }
@@ -221,3 +221,11 @@
     transform: translateY(0);
   }
 }
+
+@media (forced-colors: active) {
+  .navds-expansioncard:hover {
+    --__ac-expansioncard-border-color: highlight;
+
+    outline: 1px solid highlight;
+  }
+}