diff --git a/.changeset/metal-ads-love.md b/.changeset/metal-ads-love.md new file mode 100644 index 0000000000..6b1f1dd892 --- /dev/null +++ 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 index 2e72cbeaf2..34b71b64c5 100644 --- 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 index fa8b87d4a7..d1ddf5f6c9 100644 --- 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 index b48136b0ec..de00f202a1 100644 --- 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 index 76cc416c11..9341ab55b5 100644 --- 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 index eccc0d2422..0195d5e6f9 100644 --- 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 index 03ca04c1ad..98d47c797e 100644 --- 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 index 23ef49ba56..048d074979 100644 --- 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 index 46d9016c29..db7dce04f7 100644 --- 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; + } +} diff --git a/@navikt/core/css/form/combobox.css b/@navikt/core/css/form/combobox.css index 688dc78856..be254e50c6 100644 --- a/@navikt/core/css/form/combobox.css +++ b/@navikt/core/css/form/combobox.css @@ -39,6 +39,8 @@ .navds-combobox--error .navds-text-field__input:not(:hover):not(:disabled):not(.navds-combobox__wrapper-inner--virtually-unfocused):focus-within { + outline: 2px solid transparent; + outline-offset: 2px; box-shadow: 0 0 0 1px var(--ac-combobox-error-border, var(--a-border-danger)), var(--a-shadow-focus); @@ -94,10 +96,13 @@ 0 0 0 1px var(--a-surface-default) inset, var(--a-shadow-focus); box-shadow: var(--a-shadow-focus); + outline: 3px solid transparent; + outline-offset: 2px; } .navds-combobox__wrapper-inner:has(.navds-combobox__input:focus-visible).navds-combobox__wrapper-inner--virtually-unfocused { box-shadow: none; + outline: none; } @supports not selector(:focus-visible) { @@ -112,10 +117,13 @@ 0 0 0 1px var(--a-surface-default) inset, var(--a-shadow-focus); box-shadow: var(--a-shadow-focus); + outline: 3px solid transparent; + outline-offset: 2px; } .navds-combobox__wrapper-inner:has(.navds-combobox__input:focus).navds-combobox__wrapper-inner--virtually-unfocused { box-shadow: none; + outline: none; } } @@ -125,10 +133,13 @@ 0 0 0 1px var(--a-surface-default) inset, var(--a-shadow-focus); box-shadow: var(--a-shadow-focus); + outline: 3px solid transparent; + outline-offset: 2px; } .navds-combobox--focused .navds-combobox__wrapper-inner.navds-combobox__wrapper-inner--virtually-unfocused { box-shadow: none; + outline: none; } } @@ -368,3 +379,49 @@ gap: var(--a-spacing-1); } } + +@media (forced-colors: active) { + .navds-combobox__button-clear:hover { + color: highlight; + } + + .navds-combobox__wrapper-inner:has(.navds-combobox__input:focus-visible) { + outline-color: highlight; + } + + .navds-combobox__list-item--focus, + .navds-combobox__list--with-hover + .navds-combobox__list-item:not([data-no-focus="true"], .navds-combobox__list-item--new-option):hover { + border-left-color: highlight; + color: highlight; + } + + .navds-combobox__list-item[data-no-focus="true"] { + opacity: 1; + color: graytext; + } + + .navds-combobox__list-item--selected { + background-color: selecteditem; + color: selecteditemtext; + } + + .navds-combobox__list-item--selected > * { + forced-color-adjust: none; + } + + .navds-combobox__list-item--selected.navds-combobox__list-item--focus, + .navds-combobox__list--with-hover .navds-combobox__list-item--selected:hover { + border-left-color: highlight; + color: highlight; + } + + .navds-combobox__list--with-hover .navds-combobox__list-item--new-option:hover { + color: highlight; + } + + .navds-combobox__list-item--new-option--focus { + outline: 2px solid highlight; + outline-offset: -3px; + } +} diff --git a/@navikt/core/css/form/confirmation-panel.css b/@navikt/core/css/form/confirmation-panel.css index b3a1923c13..ffb2cf79c2 100644 --- a/@navikt/core/css/form/confirmation-panel.css +++ b/@navikt/core/css/form/confirmation-panel.css @@ -8,6 +8,7 @@ background-color: var(--ac-confirmation-panel-bg, var(--a-surface-warning-subtle)); transition: background-color linear 100ms; justify-self: stretch; + position: relative; } .navds-confirmation-panel__content { @@ -23,3 +24,26 @@ border-color: var(--ac-confirmation-panel-error-border, var(--a-border-danger)); background-color: var(--ac-confirmation-panel-error-bg, var(--a-surface-danger-subtle)); } + +@media (forced-colors: active) { + .navds-confirmation-panel__inner::before { + content: ""; + position: absolute; + left: 0; + top: 0; + height: 100%; + border-left: 8px solid; + border-color: orange; + forced-color-adjust: none; + border-start-start-radius: calc(var(--a-border-radius-medium) - 1px); + border-end-start-radius: calc(var(--a-border-radius-medium) - 1px); + } + + .navds-confirmation-panel--checked .navds-confirmation-panel__inner::before { + border-color: green; + } + + .navds-confirmation-panel--error .navds-confirmation-panel__inner::before { + border-color: red; + } +} diff --git a/@navikt/core/css/form/fieldset.css b/@navikt/core/css/form/fieldset.css index cf49a7b7fa..917c39fb9a 100644 --- a/@navikt/core/css/form/fieldset.css +++ b/@navikt/core/css/form/fieldset.css @@ -42,3 +42,10 @@ .navds-fieldset:disabled > .navds-fieldset__description { opacity: 0.3; } + +@media (forced-colors: active) { + .navds-fieldset:disabled > .navds-fieldset__legend, + .navds-fieldset:disabled > .navds-fieldset__description { + opacity: 1; + } +} diff --git a/@navikt/core/css/form/form.css b/@navikt/core/css/form/form.css index 3f4a5ba8fd..3e495a02d0 100644 --- a/@navikt/core/css/form/form.css +++ b/@navikt/core/css/form/form.css @@ -51,3 +51,9 @@ flex-shrink: 0; align-self: flex-start; } + +@media (forced-colors: active) { + .navds-form-field--disabled { + opacity: 1; + } +} diff --git a/@navikt/core/css/form/radio-checkbox.css b/@navikt/core/css/form/radio-checkbox.css index cea9f59f34..cb382d5c6b 100644 --- a/@navikt/core/css/form/radio-checkbox.css +++ b/@navikt/core/css/form/radio-checkbox.css @@ -72,6 +72,8 @@ .navds-checkbox__input:focus-visible + .navds-checkbox__label::before, .navds-radio__input:focus-visible + .navds-radio__label::before { + outline: 2px solid transparent; + outline-offset: 2px; box-shadow: 0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-default)), 0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)), @@ -81,6 +83,8 @@ @supports not selector(:focus-visible) { .navds-checkbox__input:focus + .navds-checkbox__label::before, .navds-radio__input:focus + .navds-radio__label::before { + outline: 2px solid transparent; + outline-offset: 2px; box-shadow: 0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-default)), 0 0 0 4px var(--a-border-focus); @@ -352,3 +356,81 @@ .navds-checkbox--readonly > .navds-checkbox__input:indeterminate + .navds-checkbox__label::after { background-color: var(--a-icon-subtle); } + +@media (forced-colors: active) { + .navds-checkbox__input:focus-visible + .navds-checkbox__label::before, + .navds-radio__input:focus-visible + .navds-radio__label::before { + outline-color: highlight; + } + + .navds-checkbox, + .navds-radio { + --__ac-radio-checkbox-high-contrast-bg: field; + --__ac-radio-checkbox-high-contrast-text: fieldtext; + --__ac-radio-checkbox-high-contrast-highlight: highlight; + } + + .navds-checkbox__label::before, + .navds-radio__label::before { + border: 1px solid var(--__ac-radio-checkbox-high-contrast-text); + background-color: var(--__ac-radio-checkbox-high-contrast-bg); + } + + .navds-checkbox__input:checked + .navds-checkbox__label > .navds-checkbox__icon { + color: var(--__ac-radio-checkbox-high-contrast-text); + } + + .navds-checkbox__input:indeterminate + .navds-checkbox__label::after { + background-color: var(--__ac-radio-checkbox-high-contrast-text); + } + + .navds-radio__input:checked + .navds-radio__label::before { + border: 1px solid var(--__ac-radio-checkbox-high-contrast-text); + outline: 3px solid var(--__ac-radio-checkbox-high-contrast-bg); + outline-offset: -4px; + background-color: var(--__ac-radio-checkbox-high-contrast-text); + } + + .navds-radio__input:checked:focus-visible + .navds-radio__label::before { + border: 1px solid var(--__ac-radio-checkbox-high-contrast-bg); + outline: 2px solid highlight; + outline-offset: 2px; + } + + :not(.navds-checkbox--readonly) > .navds-checkbox__input:hover:not(:disabled) + .navds-checkbox__label, + :not(.navds-radio--readonly) > .navds-radio__input:hover:not(:disabled) + .navds-radio__label { + color: highlight; + } + + .navds-checkbox__input:focus-visible + .navds-checkbox__label::before { + outline: 2px solid var(--__ac-radio-checkbox-high-contrast-highlight); + } + + .navds-checkbox--readonly > .navds-checkbox__input:checked + .navds-checkbox__label::before { + border: 1px solid var(--__ac-radio-checkbox-high-contrast-text); + background-color: var(--__ac-radio-checkbox-high-contrast-bg); + } + + .navds-checkbox--readonly > .navds-checkbox__input:indeterminate + .navds-checkbox__label::after { + background-color: var(--__ac-radio-checkbox-high-contrast-text); + } + + .navds-radio--readonly > .navds-radio__input:checked + .navds-radio__label::before { + border: 1px solid var(--__ac-radio-checkbox-high-contrast-text); + outline: 3px solid var(--__ac-radio-checkbox-high-contrast-bg); + outline-offset: -4px; + background-color: var(--__ac-radio-checkbox-high-contrast-text); + } + + .navds-checkbox--disabled, + .navds-radio--disabled { + opacity: 1; + + --__ac-radio-checkbox-high-contrast-bg: field; + --__ac-radio-checkbox-high-contrast-text: graytext; + } + + :is(.navds-checkbox--disabled, .navds-radio--disabled) :is(.navds-checkbox__label, .navds-radio__label) { + color: graytext; + } +} diff --git a/@navikt/core/css/form/search.css b/@navikt/core/css/form/search.css index 5f344f9250..07b174e5d1 100644 --- a/@navikt/core/css/form/search.css +++ b/@navikt/core/css/form/search.css @@ -99,14 +99,14 @@ } .navds-search__button-clear:focus-visible { + outline: 2px solid transparent; box-shadow: var(--a-shadow-focus); - outline: none; } @supports not selector(:focus-visible) { .navds-search__button-clear:focus { + outline: 2px solid transparent; box-shadow: var(--a-shadow-focus); - outline: none; } } @@ -216,3 +216,13 @@ z-index: 1; } } + +@media (forced-colors: active) { + .navds-modal { + outline: 2px solid transparent; + } + + .navds-search__button-clear:hover { + color: highlight; + } +} diff --git a/@navikt/core/css/form/select.css b/@navikt/core/css/form/select.css index 1e8a65a5ba..1a05a8cf5c 100644 --- a/@navikt/core/css/form/select.css +++ b/@navikt/core/css/form/select.css @@ -13,6 +13,21 @@ padding-right: 2rem; } +@media (forced-colors: active) { + .navds-select__input.navds-select__input.navds-select__input { + background-color: ButtonFace; + border-color: ButtonText; + color: ButtonText; + forced-color-adjust: none; + box-shadow: none; + } + + .navds-select__input.navds-select__input.navds-select__input:focus-visible { + outline: 2px solid highlight; + outline-offset: 2px; + } +} + .navds-select__input:hover { border-color: var(--ac-select-hover-bg, var(--a-border-action)); cursor: pointer; @@ -46,6 +61,12 @@ color: var(--ac-select-text, var(--a-text-default)); } +@media (forced-colors: active) { + .navds-select__chevron { + color: ButtonText; + } +} + .navds-form-field--small .navds-select__input { min-height: 2rem; padding: 0 var(--a-spacing-8) 0 var(--a-spacing-2); diff --git a/@navikt/core/css/form/switch.css b/@navikt/core/css/form/switch.css index 6914c76b99..02abd82051 100644 --- a/@navikt/core/css/form/switch.css +++ b/@navikt/core/css/form/switch.css @@ -111,6 +111,8 @@ } .navds-switch__input:focus-visible ~ .navds-switch__track { + outline: 2px solid transparent; + outline-offset: 2px; box-shadow: 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus); @@ -118,6 +120,7 @@ @supports not selector(:focus-visible) { .navds-switch__input:focus ~ .navds-switch__track { + outline: 2px solid transparent; box-shadow: 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus); @@ -218,3 +221,49 @@ transform: translateX(1.25rem); } } + +@media (forced-colors: active) { + .navds-switch__input:hover ~ .navds-switch__label-wrapper, + .navds-switch__label-wrapper:hover { + color: highlight; + } + + .navds-switch__thumb, + .navds-switch--readonly .navds-switch__thumb { + background-color: fieldtext; + } + + .navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb, + .navds-switch--readonly .navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb { + color: field; + } + + .navds-switch__track { + width: calc(2.75rem + 4px); + height: calc(1.5rem + 4px); + top: var(--a-spacing-3); + border: 2px solid fieldtext; + } + + .navds-switch__input:focus-visible ~ .navds-switch__track { + outline: 2px solid highlight; + outline-offset: 2px; + } + + .navds-switch--disabled:not(.navds-switch--loading) { + opacity: 1; + } + + .navds-switch--disabled:not(.navds-switch--loading) .navds-switch__thumb { + background-color: graytext; + } + + .navds-switch--disabled:not(.navds-switch--loading) .navds-switch__track { + border-color: graytext; + } + + .navds-switch--disabled:not(.navds-switch--loading) .navds-switch__label-wrapper, + .navds-switch--disabled:not(.navds-switch--loading) .navds-switch__label-wrapper:hover { + color: graytext !important; + } +} diff --git a/@navikt/core/css/form/text-field.css b/@navikt/core/css/form/text-field.css index 2b6d326c57..567c02bddc 100644 --- a/@navikt/core/css/form/text-field.css +++ b/@navikt/core/css/form/text-field.css @@ -45,7 +45,8 @@ } .navds-text-field__input:focus-visible { - outline: none; + outline: 2px solid transparent; + outline-offset: 2px; box-shadow: var(--a-shadow-focus); } @@ -101,3 +102,10 @@ .navds-text-field__input[type="search"]::-webkit-search-results-decoration { -webkit-appearance: none; } + +@media (forced-colors: active) { + .navds-text-field__input { + background-color: field; + color: fieldtext; + } +} diff --git a/@navikt/core/css/form/textarea.css b/@navikt/core/css/form/textarea.css index 28134b0f9c..05da745849 100644 --- a/@navikt/core/css/form/textarea.css +++ b/@navikt/core/css/form/textarea.css @@ -52,13 +52,15 @@ } .navds-textarea__input:focus-visible { - outline: none; + outline: 2px solid transparent; + outline-offset: 2px; box-shadow: var(--a-shadow-focus); } @supports not selector(:focus-visible) { .navds-textarea__input:focus { - outline: none; + outline: 2px solid transparent; + outline-offset: 2px; box-shadow: var(--a-shadow-focus); } } @@ -141,3 +143,10 @@ border-color: var(--a-border-subtle); cursor: default; } + +@media (forced-colors: active) { + .navds-textarea__input { + background-color: field; + color: fieldtext; + } +} diff --git a/@navikt/core/css/help-text.css b/@navikt/core/css/help-text.css index 9b611d99ab..ef8fcd447b 100644 --- a/@navikt/core/css/help-text.css +++ b/@navikt/core/css/help-text.css @@ -13,7 +13,7 @@ } .navds-help-text__button:focus-visible { - outline: none; + outline: 2px solid transparent; box-shadow: 0 0 0 1px var(--a-border-focus), inset 0 0 0 1px var(--a-border-focus); @@ -21,7 +21,7 @@ @supports not selector(:focus-visible) { .navds-help-text__button:focus { - outline: none; + outline: 2px solid transparent; box-shadow: 0 0 0 1px var(--a-border-focus), inset 0 0 0 1px var(--a-border-focus); @@ -64,3 +64,17 @@ display: inherit; } } + +@media (forced-colors: active) { + .navds-help-text__button:where(:hover, :focus-visible, [aria-expanded="true"]) > .navds-help-text__icon { + display: inherit; + } + + .navds-help-text__button:hover > .navds-help-text__icon { + color: highlight; + } + + .navds-help-text__button:where(:hover, :focus-visible, [aria-expanded="true"]) > .navds-help-text__icon--filled { + display: none; + } +} diff --git a/@navikt/core/css/internalheader.css b/@navikt/core/css/internalheader.css index e97cd2b736..0eb6534bfa 100644 --- a/@navikt/core/css/internalheader.css +++ b/@navikt/core/css/internalheader.css @@ -7,6 +7,27 @@ --navds-internalheader-focus: inset 0 0 0 2px var(--a-border-focus-on-inverted); } +@media (forced-colors: active) { + .navds-internalheader { + background-color: ButtonFace; + border-color: ButtonText; + border: solid 1px ButtonText; + color: ButtonText; + } + + .navds-internalheader a:focus-visible { + box-shadow: none; + outline: 2px solid highlight; + outline-offset: 2px; + } + + .navds-internalheader .navds-internalheader__button:focus-visible { + box-shadow: none; + outline: 2px solid highlight; + outline-offset: 2px; + } +} + .navds-internalheader__title { border: none; overflow: visible; diff --git a/@navikt/core/css/link-panel.css b/@navikt/core/css/link-panel.css index bc97a1d3e5..eee7b486c7 100644 --- a/@navikt/core/css/link-panel.css +++ b/@navikt/core/css/link-panel.css @@ -18,14 +18,16 @@ } .navds-link-panel:focus-visible { + outline: 3px solid transparent; + outline-offset: 2px; box-shadow: var(--a-shadow-focus); - outline: none; } @supports not selector(:focus-visible) { .navds-link-panel:focus { + outline: 3px solid transparent; + outline-offset: 2px; box-shadow: var(--a-shadow-focus); - outline: none; } } diff --git a/@navikt/core/css/link.css b/@navikt/core/css/link.css index 17bb838d35..b31175e0f3 100644 --- a/@navikt/core/css/link.css +++ b/@navikt/core/css/link.css @@ -36,7 +36,7 @@ } .navds-link:focus-visible { - outline: none; + outline: 2px solid transparent; color: var(--ac-link-focus-text, var(--a-text-on-action)); text-decoration: none; background-color: var(--ac-link-focus-bg, var(--a-border-focus)); @@ -45,7 +45,7 @@ @supports not selector(:focus-visible) { .navds-link:focus { - outline: none; + outline: 2px solid transparent; color: var(--ac-link-focus-text, var(--a-text-on-action)); text-decoration: none; background-color: var(--ac-link-focus-bg, var(--a-border-focus)); @@ -54,7 +54,7 @@ } .navds-link:active { - outline: none; + outline: 2px solid transparent; color: var(--ac-link-active-text, var(--a-text-on-action)); text-decoration: none; background-color: var(--ac-link-active-bg, var(--a-border-focus)); diff --git a/@navikt/core/css/loader.css b/@navikt/core/css/loader.css index 5773e27f5d..5a53b6c832 100644 --- a/@navikt/core/css/loader.css +++ b/@navikt/core/css/loader.css @@ -111,3 +111,9 @@ stroke-dashoffset: -120px; } } + +@media (forced-colors: active) { + .navds-loader__background { + stroke: canvastext; + } +} diff --git a/@navikt/core/css/modal.css b/@navikt/core/css/modal.css index 458f2f8f82..064f66cc41 100644 --- a/@navikt/core/css/modal.css +++ b/@navikt/core/css/modal.css @@ -168,3 +168,9 @@ opacity: 1; } } + +@media (forced-colors: active) { + .navds-modal { + outline: 2px solid transparent; + } +} diff --git a/@navikt/core/css/popover.css b/@navikt/core/css/popover.css index 32d215521a..9cdf49542d 100644 --- a/@navikt/core/css/popover.css +++ b/@navikt/core/css/popover.css @@ -59,3 +59,26 @@ border-right-color: transparent; border-top-color: transparent; } + +@media (forced-colors: active) { + .navds-popover[data-placement^="top"] > .navds-popover__arrow { + border-left-color: canvas; + border-top-color: canvas; + } + + /* prettier-ignore */ + .navds-popover[data-placement^="bottom"] > .navds-popover__arrow { + border-bottom-color: canvas; + border-right-color: canvas; + } + + .navds-popover[data-placement^="left"] > .navds-popover__arrow { + border-left-color: canvas; + border-bottom-color: canvas; + } + + .navds-popover[data-placement^="right"] > .navds-popover__arrow { + border-right-color: canvas; + border-top-color: canvas; + } +} diff --git a/@navikt/core/css/read-more.css b/@navikt/core/css/read-more.css index d76d8ade68..ab529eb6d2 100644 --- a/@navikt/core/css/read-more.css +++ b/@navikt/core/css/read-more.css @@ -16,6 +16,21 @@ padding: var(--a-spacing-05) var(--a-spacing-1) var(--a-spacing-05) var(--a-spacing-05); } +@media (forced-colors: active) { + .navds-read-more__button { + background-color: ButtonFace; + border-color: ButtonText; + border: solid 1px ButtonText; + color: ButtonText; + } + + .navds-read-more__button.navds-read-more__button:focus-visible { + box-shadow: none; + outline: 2px solid highlight; + outline-offset: 2px; + } +} + .navds-read-more__button:hover { background-color: var(--ac-read-more-hover-bg, var(--a-surface-hover)); } diff --git a/@navikt/core/css/skeleton.css b/@navikt/core/css/skeleton.css index 9ae43c9f7e..f26f21e366 100644 --- a/@navikt/core/css/skeleton.css +++ b/@navikt/core/css/skeleton.css @@ -57,3 +57,11 @@ opacity: 0.4; } } + +@media (forced-colors: active) { + .navds-skeleton { + forced-color-adjust: none; + background-color: var(--a-surface-neutral); + animation-duration: 2s; + } +} diff --git a/@navikt/core/css/stepper.css b/@navikt/core/css/stepper.css index 2695f1115e..6e6228cb1b 100644 --- a/@navikt/core/css/stepper.css +++ b/@navikt/core/css/stepper.css @@ -70,6 +70,41 @@ margin: calc(var(--navds-stepper-border-width) * -1) calc(var(--navds-stepper-border-width) * -1) 1.75rem; } +@media (forced-colors: active) { + .navds-stepper__step { + background-color: ButtonFace; + color: ButtonText; + } + + .navds-stepper__circle.navds-stepper__circle { + border: 0; + } + + .navds-stepper__step .navds-stepper__circle { + forced-color-adjust: none; + background-color: ButtonText; + border-color: ButtonText; + color: ButtonFace; + } + + .navds-stepper__step.navds-stepper__step:focus-visible { + box-shadow: none; + outline: 2px solid highlight; + outline-offset: 2px; + } + + .navds-stepper__step.navds-stepper__step--active .navds-stepper__circle { + forced-color-adjust: none; + background-color: highlight; + border-color: highlighttext; + color: highlighttext; + } + + .navds-stepper__line { + background-color: ButtonText; + } +} + button.navds-stepper__step { appearance: none; border: none; diff --git a/@navikt/core/css/table.css b/@navikt/core/css/table.css index bfc93c15ee..11c66ad8b9 100644 --- a/@navikt/core/css/table.css +++ b/@navikt/core/css/table.css @@ -264,3 +264,29 @@ .navds-table--small .navds-table__expanded-row-content { padding: var(--a-spacing-2) calc(var(--a-spacing-2) + 3rem); } + +@media (forced-colors: active) { + .navds-date.navds-date button.rdp-day_selected { + forced-color-adjust: none; + background-color: highlight; + color: highlighttext; + box-shadow: none; + } + + .navds-date.navds-date button { + color: buttontext; + forced-color-adjust: none; + outline: none; + box-shadow: none; + } + + .navds-date button:focus-visible { + color: buttontext; + forced-color-adjust: none; + outline: 2px solid highlight; + } + + .navds-date.navds-date button.rdp-day_disabled { + color: GrayText; + } +} diff --git a/@navikt/core/css/tabs.css b/@navikt/core/css/tabs.css index 9aac4d0ce8..7bddb937ae 100644 --- a/@navikt/core/css/tabs.css +++ b/@navikt/core/css/tabs.css @@ -63,14 +63,15 @@ } .navds-tabs__tab:focus-visible { - outline: none; + outline: 2px solid transparent; + outline-offset: -2px; box-shadow: inset var(--a-shadow-focus); color: var(--ac-tabs-focus-text, var(--a-text-default)); } @supports not selector(:focus-visible) { .navds-tabs__tab:focus { - outline: none; + outline: 2px solid transparent; box-shadow: inset var(--a-shadow-focus); color: var(--ac-tabs-focus-text, var(--a-text-default)); } @@ -117,13 +118,29 @@ } .navds-tabs__tabpanel:focus-visible { - outline: none; + outline: 2px solid transparent; box-shadow: inset 0 0 0 2px var(--a-border-focus); } @supports not selector(:focus-visible) { .navds-tabs__tabpanel:focus { - outline: none; + outline: 2px solid transparent; box-shadow: inset 0 0 0 2px var(--a-border-focus); } } + +@media (forced-colors: active) { + .navds-tabs__tab[aria-selected="true"] { + border-bottom: 3px solid canvastext; + padding-block-end: calc(var(--a-spacing-3) - 3px); + } + + .navds-tabs__tab--small[aria-selected="true"] { + padding-block-end: calc(var(--a-spacing-1-alt) - 3px); + } + + .navds-tabs__tab-icon--top[aria-selected="true"], + .navds-tabs__tab--small.navds-tabs__tab-icon--top[aria-selected="true"] { + padding-block-end: calc(var(--a-spacing-1) - 3px); + } +} diff --git a/@navikt/core/css/tag.css b/@navikt/core/css/tag.css index 9000584d9c..2290a4287e 100644 --- a/@navikt/core/css/tag.css +++ b/@navikt/core/css/tag.css @@ -180,3 +180,15 @@ background-color: var(--ac-tag-alt-3-moderate-bg, var(--a-surface-alt-3-moderate)); color: var(--ac-tag-alt-3-moderate-text, var(--a-text-default)); } + +@media (forced-colors: active) { + .navds-tag { + forced-color-adjust: none; + } + + .navds-tag--neutral, + .navds-tag--neutral-moderate { + border-color: canvastext; + color: canvastext; + } +} diff --git a/@navikt/core/css/timeline.css b/@navikt/core/css/timeline.css index 253a629c97..eb543b390d 100644 --- a/@navikt/core/css/timeline.css +++ b/@navikt/core/css/timeline.css @@ -393,3 +393,57 @@ border-right-color: transparent; border-top-color: transparent; } + +@media (forced-colors: active) { + .navds-timeline__period:focus { + outline: 2px solid highlight; + outline-offset: 2px; + } + + .navds-timeline__period--success, + .navds-timeline__period--warning, + .navds-timeline__period--info, + .navds-timeline__period--neutral, + .navds-timeline__period--danger { + forced-color-adjust: none; + } + + .navds-timeline__row { + border: 1px solid transparent; + } + + .navds-timeline__pin-wrapper::before { + border: 1px solid transparent; + } + + .navds-timeline__pin-button { + outline: 4px solid transparent; + } + + .navds-timeline__pin-button:focus, + .navds-timeline__pin-button:focus-visible { + outline: 4px solid highlight; + outline-offset: 2px; + box-shadow: none; + } + + .navds-timeline__popover[data-placement^="top"] > .navds-timeline__popover-arrow { + border-left-color: canvas; + border-top-color: canvas; + } + + .navds-timeline__popover[data-placement^="bottom"] > .navds-timeline__popover-arrow { + border-bottom-color: canvas; + border-right-color: canvas; + } + + .navds-timeline__popover[data-placement^="left"] > .navds-timeline__popover-arrow { + border-left-color: canvas; + border-bottom-color: canvas; + } + + .navds-timeline__popover[data-placement^="right"] > .navds-timeline__popover-arrow { + border-right-color: canvas; + border-top-color: canvas; + } +} diff --git a/@navikt/core/css/toggle-group.css b/@navikt/core/css/toggle-group.css index 11c27ab3ac..9a937f7c1d 100644 --- a/@navikt/core/css/toggle-group.css +++ b/@navikt/core/css/toggle-group.css @@ -65,7 +65,8 @@ } .navds-toggle-group__button:focus-visible { - outline: none; + outline: 2px solid transparent; + outline-offset: 1px; box-shadow: 0 0 0 1px var(--a-surface-default), 0 0 0 4px var(--a-border-focus); @@ -73,7 +74,8 @@ @supports not selector(:focus-visible) { .navds-toggle-group__button:focus { - outline: none; + outline: 2px solid transparent; + outline-offset: 1px; box-shadow: 0 0 0 1px var(--a-surface-default), 0 0 0 4px var(--a-border-focus); @@ -144,3 +146,32 @@ .navds-toggle-group--small > .navds-toggle-group__button > .navds-toggle-group__button-inner > svg { font-size: 1.125rem; } + +@media (forced-colors: active) { + .navds-toggle-group { + border: 2px solid transparent; + } + + .navds-toggle-group__button:hover { + color: highlight; + } + + .navds-toggle-group__button[aria-checked="true"], + .navds-toggle-group__button[aria-pressed="true"] { + background-color: selecteditem; + color: selecteditemtext; + } + + .navds-toggle-group__button[aria-checked="true"] > *, + .navds-toggle-group__button[aria-pressed="true"] > * { + forced-color-adjust: none; + } + + .navds-toggle-group__button:active { + background-color: none !important; + } + + .navds-toggle-group__button:focus-visible { + outline-color: highlight; + } +} diff --git a/@navikt/core/css/tooltip.css b/@navikt/core/css/tooltip.css index 3fc89e7a6d..d99a9db724 100644 --- a/@navikt/core/css/tooltip.css +++ b/@navikt/core/css/tooltip.css @@ -51,3 +51,31 @@ align-items: center; justify-content: center; } + +@media (forced-colors: active) { + .navds-tooltip { + --__a-tooltip-high-contrast-border: 1px solid transparent; + + border: var(--__a-tooltip-high-contrast-border); + } + + .navds-tooltip[data-side="top"] .navds-tooltip__arrow { + border-bottom: var(--__a-tooltip-high-contrast-border); + border-right: var(--__a-tooltip-high-contrast-border); + } + + .navds-tooltip[data-side="right"] .navds-tooltip__arrow { + border-bottom: var(--__a-tooltip-high-contrast-border); + border-left: var(--__a-tooltip-high-contrast-border); + } + + .navds-tooltip[data-side="bottom"] .navds-tooltip__arrow { + border-left: var(--__a-tooltip-high-contrast-border); + border-top: var(--__a-tooltip-high-contrast-border); + } + + .navds-tooltip[data-side="left"] .navds-tooltip__arrow { + border-top: var(--__a-tooltip-high-contrast-border); + border-right: var(--__a-tooltip-high-contrast-border); + } +}