@navikt/ds-css 7.4.0 → 7.4.2

package/darkside/form/switch.darkside.css

@@ -0,0 +1,269 @@
+.navds-switch {
+  position: relative;
+  min-height: 3rem;
+  width: fit-content;
+}
+
+.navds-switch--right {
+  width: auto;
+}
+
+.navds-switch--small {
+  position: relative;
+  min-height: 2rem;
+}
+
+/* Input */
+.navds-switch__input {
+  cursor: pointer;
+  position: absolute;
+  z-index: 1;
+  width: 3rem;
+  height: 3rem;
+  opacity: 0;
+  top: 0;
+}
+
+.navds-switch--small > .navds-switch__input {
+  height: 2rem;
+  top: 0;
+}
+
+/* Label */
+.navds-switch__label-wrapper {
+  cursor: pointer;
+  color: var(--a-text-default);
+}
+
+.navds-switch__content {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+  padding: 0.75rem 0 0.75rem 3.25rem;
+}
+
+.navds-switch--right > .navds-switch__label-wrapper > .navds-switch__content {
+  padding: 0.75rem 3.25rem 0.75rem 0;
+}
+
+.navds-switch--small > .navds-switch__label-wrapper > .navds-switch__content {
+  padding: calc(var(--a-spacing-2) - var(--a-spacing-05)) 0 calc(var(--a-spacing-2) - var(--a-spacing-05)) 3.25rem;
+}
+
+.navds-switch--right.navds-switch--small > .navds-switch__label-wrapper > .navds-switch__content {
+  padding: calc(var(--a-spacing-2) - var(--a-spacing-05)) 3.25rem calc(var(--a-spacing-2) - var(--a-spacing-05)) 0;
+}
+
+.navds-switch--with-description,
+.navds-switch--small > .navds-switch__label-wrapper > .navds-switch--with-description {
+  padding-bottom: 0;
+}
+
+.navds-switch__input:hover ~ .navds-switch__label-wrapper,
+.navds-switch__label-wrapper:hover {
+  color: var(--ac-switch-action, var(--a-surface-action-selected));
+}
+
+.navds-switch__input:disabled:hover ~ .navds-switch__label-wrapper {
+  color: inherit;
+}
+
+/* Track */
+.navds-switch__track {
+  width: 2.75rem;
+  height: 1.5rem;
+  background-color: var(--ac-switch-bg, var(--a-surface-neutral));
+  position: absolute;
+  top: var(--a-spacing-3);
+  left: 0;
+  border-radius: var(--a-border-radius-full);
+  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.navds-switch--small > .navds-switch__track {
+  top: var(--a-spacing-1);
+}
+
+.navds-switch--right > .navds-switch__input,
+.navds-switch--right > .navds-switch__track {
+  right: 0;
+  left: auto;
+}
+
+.navds-switch__input:checked ~ .navds-switch__track {
+  background-color: var(--ac-switch-checked-bg, var(--a-surface-action-selected));
+}
+
+.navds-switch__input:hover ~ .navds-switch__track {
+  background-color: var(--ac-switch-hover-bg, var(--a-surface-neutral-hover));
+}
+
+.navds-switch__input:hover:checked ~ .navds-switch__track {
+  background-color: var(--ac-switch-checked-hover-bg, var(--a-surface-action-selected-hover));
+}
+
+.navds-switch__input:disabled ~ .navds-switch__track {
+  background-color: var(--ac-switch-bg, var(--a-surface-neutral));
+}
+
+.navds-switch__input:checked:disabled ~ .navds-switch__track {
+  background-color: var(--ac-switch-checked-bg, var(--a-border-action-selected));
+}
+
+.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);
+}
+
+@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);
+  }
+}
+
+/* Thumb */
+.navds-switch__thumb {
+  background-color: var(--ac-switch-thumb-bg, var(--a-surface-default));
+  color: var(--ac-switch-thumb-icon, var(--a-icon-subtle));
+  border-radius: var(--a-border-radius-full);
+  width: 1.25rem;
+  height: 1.25rem;
+  position: absolute;
+  transform: translateX(0);
+  left: var(--a-spacing-05);
+  top: var(--a-spacing-05);
+  transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb {
+  transform: translateX(1.25rem);
+  color: var(--ac-switch-thumb-icon-checked, var(--a-icon-action-selected));
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .navds-switch__input:hover ~ .navds-switch__track > .navds-switch__thumb {
+    transform: translateX(0.125rem);
+  }
+
+  .navds-switch__input:checked:hover ~ .navds-switch__track > .navds-switch__thumb {
+    transform: translateX(1.125rem);
+  }
+}
+
+.navds-switch__input:disabled:hover ~ .navds-switch__track > .navds-switch__thumb {
+  transform: translateX(0);
+}
+
+.navds-switch__input:checked:disabled:hover ~ .navds-switch__track > .navds-switch__thumb {
+  transform: translateX(1.25rem);
+}
+
+/* Disabled */
+.navds-switch__input:disabled {
+  appearance: none;
+}
+
+.navds-switch--disabled:not(.navds-switch--loading) {
+  opacity: 0.3;
+}
+
+.navds-switch__input:disabled,
+.navds-switch__input:disabled ~ .navds-switch__label-wrapper {
+  cursor: not-allowed;
+}
+
+/* Readonly */
+.navds-switch--readonly > .navds-switch__track,
+.navds-switch--readonly > .navds-switch__input:hover ~ .navds-switch__track,
+.navds-switch--readonly > .navds-switch__input:checked ~ .navds-switch__track,
+.navds-switch--readonly > .navds-switch__input:checked:hover ~ .navds-switch__track {
+  background-color: var(--a-surface-neutral-moderate);
+}
+
+.navds-switch--readonly > .navds-switch__label-wrapper,
+.navds-switch--readonly > .navds-switch__input {
+  cursor: default;
+}
+
+.navds-switch--readonly > .navds-switch__input:hover ~ .navds-switch__label-wrapper,
+.navds-switch--readonly .navds-switch__label-wrapper:hover {
+  color: var(--a-text-default);
+}
+
+.navds-switch--readonly .navds-switch__label {
+  display: inline-flex;
+}
+
+.navds-switch--readonly .navds-switch__thumb {
+  background-color: var(--a-surface-subtle);
+  box-shadow: 0 0 0 2px var(--a-border-default);
+}
+
+.navds-switch--readonly > .navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb {
+  color: var(--a-icon-subtle);
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .navds-switch--readonly > .navds-switch__input:hover ~ .navds-switch__track > .navds-switch__thumb {
+    transform: translateX(0);
+  }
+
+  .navds-switch--readonly > .navds-switch__input:checked:hover ~ .navds-switch__track > .navds-switch__thumb {
+    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;
+  }
+}

package/darkside/form/text-field.darkside.css

@@ -0,0 +1,112 @@
+[data-theme="dark"] {
+  --__ac-textfield-text: var(--a-text-on-inverted);
+  --__ac-textfield-bg: var(--a-surface-inverted);
+  --__ac-textfield-border: var(--a-border-on-inverted);
+  --__ac-textfield-hover-border: var(--a-blue-200);
+  --__ac-textfield-placeholder: var(--a-gray-500);
+  --__ac-textfield-error-border: var(--a-red-300);
+}
+
+[data-theme="light"] {
+  --__ac-textfield-text: initial;
+  --__ac-textfield-bg: initial;
+  --__ac-textfield-border: initial;
+  --__ac-textfield-hover-border: initial;
+  --__ac-textfield-placeholder: initial;
+  --__ac-textfield-error-border: initial;
+}
+
+.navds-text-field__input {
+  appearance: none;
+  padding: var(--a-spacing-2);
+  background-color: var(--ac-textfield-bg, var(--__ac-textfield-bg, var(--a-surface-default)));
+  border-radius: var(--a-border-radius-medium);
+  border: 1px solid var(--ac-textfield-border, var(--__ac-textfield-border, var(--a-border-default)));
+  min-height: 3rem;
+  width: 100%;
+  color: var(--ac-textfield-text, var(--__ac-textfield-text, var(--a-text-default)));
+}
+
+.navds-text-field__input[size] {
+  width: auto;
+}
+
+.navds-text-field__input::placeholder {
+  color: var(--ac-textfield-placeholder, var(--__ac-textfield-placeholder, var(--a-text-subtle)));
+}
+
+.navds-form-field--small .navds-text-field__input {
+  padding: 0 var(--a-spacing-2);
+  min-height: 2rem;
+}
+
+.navds-text-field__input:hover {
+  border-color: var(--ac-textfield-hover-border, var(--__ac-textfield-hover-border, var(--a-border-action-hover)));
+}
+
+.navds-text-field__input:focus-visible {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  box-shadow: var(--a-shadow-focus);
+  border-color: var(--ac-textfield-active-border, var(--a-border-action-selected));
+}
+
+@supports not selector(:focus-visible) {
+  .navds-text-field__input:focus {
+    outline: none;
+    box-shadow: var(--a-shadow-focus);
+  }
+}
+
+/**
+  Error handling
+*/
+.navds-text-field--error > .navds-text-field__input:not(:hover, :disabled) {
+  border-color: var(--ac-textfield-error-border, var(--__ac-textfield-error-border, var(--a-border-danger)));
+  box-shadow: 0 0 0 1px var(--ac-textfield-error-border, var(--__ac-textfield-error-border, var(--a-border-danger)));
+}
+
+.navds-text-field--error > .navds-text-field__input:focus-visible:not(:hover, :disabled) {
+  box-shadow:
+    0 0 0 1px var(--a-border-danger),
+    var(--a-shadow-focus);
+}
+
+@supports not selector(:focus-visible) {
+  .navds-text-field--error > .navds-text-field__input:focus:not(:hover, :disabled) {
+    box-shadow:
+      0 0 0 1px var(--a-border-danger),
+      var(--a-shadow-focus);
+  }
+}
+
+/* Disabled handling */
+.navds-text-field__input:disabled {
+  background-color: var(--ac-textfield-bg, var(--__ac-textfield-bg, var(--a-surface-default)));
+  border-color: var(--ac-textfield-border, var(--__ac-textfield-border, var(--a-border-default)));
+  box-shadow: none;
+  cursor: not-allowed;
+}
+
+.navds-text-field--readonly .navds-text-field__input {
+  background-color: var(--a-surface-subtle);
+  border-color: var(--a-border-subtle);
+  cursor: default;
+}
+
+/**
+  * Removes default search icon
+  */
+.navds-text-field__input[type="search"]::-webkit-search-decoration,
+.navds-text-field__input[type="search"]::-webkit-search-cancel-button,
+.navds-text-field__input[type="search"]::-webkit-search-results-button,
+.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;
+  }
+}

package/darkside/form/textarea.darkside.css

@@ -0,0 +1,144 @@
+[data-theme="dark"] {
+  --__ac-textarea-text: var(--a-text-on-inverted);
+  --__ac-textarea-bg: var(--a-transparent);
+  --__ac-textarea-border: var(--a-border-on-inverted);
+  --__ac-textarea-hover-border: var(--a-blue-200);
+  --__ac-textarea-placeholder: var(--a-gray-500);
+  --__ac-textarea-error-border: var(--a-red-300);
+  --__ac-textarea-counter-text: var(--a-gray-300);
+  --__ac-textarea-counter-error-text: var(--a-red-300);
+}
+
+[data-theme="light"] {
+  --__ac-textarea-text: initial;
+  --__ac-textarea-bg: initial;
+  --__ac-textarea-border: initial;
+  --__ac-textarea-hover-border: initial;
+  --__ac-textarea-placeholder: initial;
+  --__ac-textarea-error-border: initial;
+  --__ac-textarea-counter-text: initial;
+  --__ac-textarea-counter-error-text: initial;
+}
+
+.navds-textarea__input {
+  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
+  height: var(--__ac-textarea-height);
+  appearance: none;
+  padding: var(--a-spacing-2);
+  background-color: var(--ac-textarea-bg, var(--__ac-textarea-bg, var(--a-surface-default)));
+  border-radius: var(--a-border-radius-medium);
+  border: 1px solid var(--ac-textarea-border, var(--__ac-textarea-border, var(--a-border-default)));
+  resize: none;
+  width: 100%;
+  display: block;
+  color: var(--ac-textarea-text, var(--__ac-textarea-text, var(--a-text-default)));
+}
+
+.navds-textarea__input::placeholder {
+  color: var(--ac-textarea-placeholder, var(--__ac-textarea-placeholder, var(--a-text-subtle)));
+}
+
+.navds-textarea__input:hover {
+  border-color: var(--ac-textarea-hover-border, var(--__ac-textarea-hover-border, var(--a-border-action-hover)));
+}
+
+.navds-textarea__input:focus-visible {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  box-shadow: var(--a-shadow-focus);
+  border-color: var(--ac-textarea-active-border, var(--a-border-action-selected));
+}
+
+@supports not selector(:focus-visible) {
+  .navds-textarea__input:focus {
+    outline: 2px solid transparent;
+    outline-offset: 2px;
+    box-shadow: var(--a-shadow-focus);
+  }
+}
+
+.navds-form-field--small .navds-textarea__input {
+  padding: var(--a-spacing-1-alt);
+}
+
+.navds-textarea__counter {
+  margin-top: -0.375rem;
+  color: var(--ac-textarea-counter-text, var(--__ac-textarea-counter-text, var(--a-text-subtle)));
+}
+
+.navds-textarea__counter--error {
+  color: var(--ac-textarea-counter-error-text, var(--__ac-textarea-counter-error-text, var(--a-text-danger)));
+}
+
+.navds-textarea__sr-counter {
+  display: none;
+}
+
+.navds-textarea__input:focus ~ .navds-textarea__sr-counter {
+  display: initial;
+}
+
+.navds-textarea--resize-both .navds-textarea__input {
+  resize: both;
+  border-end-end-radius: 0;
+}
+
+.navds-textarea--resize-horizontal .navds-textarea__input {
+  resize: horizontal;
+  border-end-end-radius: 0;
+}
+
+.navds-textarea--resize-vertical .navds-textarea__input {
+  resize: vertical;
+  border-end-end-radius: 0;
+}
+
+.navds-textarea--autoscrollbar,
+.navds-textarea--autoscrollbar .navds-textarea__wrapper {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+
+  /* Makes the box-shadow visible even though overflow is hidden: */
+  padding: 3px;
+  margin: -3px;
+}
+
+.navds-textarea--autoscrollbar .navds-textarea__input {
+  scrollbar-gutter: stable; /* Needed to prevent scrollbar from appearing too early */
+}
+
+/**
+  Error handling
+*/
+.navds-textarea--error .navds-textarea__input:not(:hover, :focus-visible, :disabled) {
+  box-shadow: 0 0 0 1px var(--ac-textarea-error-border, var(--__ac-textarea-error-border, var(--a-border-danger)));
+  border-color: var(--ac-textarea-error-border, var(--__ac-textarea-error-border, var(--a-border-danger)));
+}
+
+@supports not selector(:focus-visible) {
+  .navds-textarea--error .navds-textarea__input:not(:hover, :focus, :disabled) {
+    box-shadow: 0 0 0 1px var(--ac-textarea-error-border, var(--__ac-textarea-error-border, var(--a-border-danger)));
+    border-color: var(--ac-textarea-error-border, var(--__ac-textarea-error-border, var(--a-border-danger)));
+  }
+}
+
+.navds-textarea__input:disabled {
+  background-color: var(--ac-textarea-bg, var(--__ac-textarea-bg, var(--a-surface-default)));
+  border-color: var(--ac-textarea-border, var(--__ac-textarea-border, var(--a-border-default)));
+  box-shadow: none;
+  cursor: not-allowed;
+}
+
+.navds-textarea--readonly .navds-textarea__input {
+  background-color: var(--a-surface-subtle);
+  border-color: var(--a-border-subtle);
+  cursor: default;
+}
+
+@media (forced-colors: active) {
+  .navds-textarea__input {
+    background-color: field;
+    color: fieldtext;
+  }
+}

package/darkside/guide-panel.darkside.css

@@ -0,0 +1,96 @@
+.navds-guide-panel {
+  --__ac-guide-panel-guide-size: 4rem;
+
+  position: relative;
+  padding-top: calc(var(--__ac-guide-panel-guide-size) / 2);
+}
+
+.navds-guide {
+  background: var(--ac-guide-panel-illustration-bg, var(--a-surface-alt-3-subtle));
+  border: 2px solid var(--ac-guide-panel-border, var(--a-border-alt-3));
+  border-radius: var(--a-border-radius-full);
+  overflow: hidden;
+  position: absolute;
+  width: var(--__ac-guide-panel-guide-size);
+  height: var(--__ac-guide-panel-guide-size);
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.navds-guide svg,
+.navds-guide img {
+  height: 100%;
+  width: 100%;
+}
+
+.navds-guide-panel__content {
+  background-color: var(--ac-guide-panel-bg, var(--a-surface-default));
+  border: 2px solid var(--ac-guide-panel-border, var(--a-border-alt-3));
+  border-radius: var(--a-border-radius-large);
+  padding: var(--a-spacing-4);
+  padding-top: var(--a-spacing-12);
+}
+
+@media (min-width: 480px) {
+  .navds-guide-panel {
+    --__ac-guide-panel-guide-size: 6.25rem;
+  }
+
+  .navds-guide-panel__content {
+    padding: var(--a-spacing-8);
+    padding-top: 4.25rem;
+  }
+}
+
+/* not-poster */
+
+.navds-guide-panel--not-poster {
+  padding-top: 0;
+  padding-left: calc(var(--__ac-guide-panel-guide-size) / 2);
+}
+
+.navds-guide-panel--not-poster .navds-guide {
+  left: 0;
+  top: var(--a-spacing-5);
+  transform: none;
+}
+
+.navds-guide-panel--not-poster .navds-guide-panel__content {
+  padding: var(--a-spacing-4);
+  padding-left: var(--a-spacing-10);
+  min-height: calc(var(--__ac-guide-panel-guide-size) + var(--a-spacing-5) + var(--a-spacing-5));
+}
+
+@media (min-width: 480px) {
+  .navds-guide-panel--not-poster {
+    --__ac-guide-panel-guide-size: 5rem;
+  }
+
+  .navds-guide-panel--not-poster .navds-guide-panel__content {
+    padding: var(--a-spacing-6);
+    padding-left: var(--a-spacing-14);
+  }
+}
+
+/* responsive-poster (on desktop) */
+
+@media (min-width: 480px) {
+  .navds-guide-panel--responsive-poster {
+    --__ac-guide-panel-guide-size: 5rem;
+
+    padding-top: 0;
+    padding-left: calc(var(--__ac-guide-panel-guide-size) / 2);
+  }
+
+  .navds-guide-panel--responsive-poster .navds-guide {
+    left: 0;
+    top: var(--a-spacing-5);
+    transform: none;
+  }
+
+  .navds-guide-panel--responsive-poster .navds-guide-panel__content {
+    padding: var(--a-spacing-6);
+    padding-left: var(--a-spacing-14);
+    min-height: calc(var(--__ac-guide-panel-guide-size) + var(--a-spacing-5) + var(--a-spacing-5));
+  }
+}

package/darkside/help-text.darkside.css

@@ -0,0 +1,85 @@
+.navds-help-text__button {
+  margin: 0;
+  border: 0;
+  cursor: pointer;
+  background-color: transparent;
+  border-radius: var(--a-border-radius-full);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: var(--ac-help-text-button-color, var(--a-surface-action));
+  font-size: 1.25rem;
+  padding: calc(var(--a-spacing-1) / 2);
+}
+
+.navds-help-text__button:focus-visible {
+  outline: 2px solid transparent;
+  box-shadow:
+    0 0 0 1px var(--a-border-focus),
+    inset 0 0 0 1px var(--a-border-focus);
+}
+
+@supports not selector(:focus-visible) {
+  .navds-help-text__button:focus {
+    outline: 2px solid transparent;
+    box-shadow:
+      0 0 0 1px var(--a-border-focus),
+      inset 0 0 0 1px var(--a-border-focus);
+  }
+}
+
+.navds-help-text__icon {
+  border-radius: var(--a-border-radius-full);
+}
+
+.navds-help-text__popover > .navds-popover__arrow {
+  background-color: var(--ac-help-text-popover-bg, var(--a-surface-info-subtle));
+}
+
+.navds-help-text__popover.navds-popover {
+  background-color: var(--ac-help-text-popover-bg, var(--a-surface-info-subtle));
+  max-width: min(65ch, calc(100vw - 1.5rem));
+
+  --ac-popover-border: var(--a-border-info);
+}
+
+.navds-help-text__icon--filled {
+  display: none;
+}
+
+.navds-help-text__button:where(:hover, :focus-visible, [aria-expanded="true"]) > .navds-help-text__icon {
+  display: none;
+}
+
+.navds-help-text__button:where(:hover, :focus-visible, [aria-expanded="true"]) > .navds-help-text__icon--filled {
+  display: inherit;
+  color: var(--ac-help-text-button-hover-color, var(--a-surface-action-hover));
+}
+
+.navds-help-text__button[aria-expanded="true"] > .navds-help-text__icon--filled {
+  color: var(--ac-help-text-button-active-color, var(--a-surface-action-active));
+}
+
+@supports not selector(:focus-visible) {
+  .navds-help-text__button:where(:focus) > .navds-help-text__icon {
+    display: none;
+  }
+
+  .navds-help-text__button:where(:focus) > .navds-help-text__icon--filled {
+    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;
+  }
+}