@navikt/ds-css 7.6.0 → 7.7.0

package/CHANGELOG.md

@@ -1,5 +1,7 @@
 # @navikt/ds-css
 
+## 7.7.0
+
 ## 7.6.0
 
 ### Minor Changes

package/darkside/alert.darkside.css

@@ -1,7 +1,7 @@
 .navds-alert {
   border-radius: var(--ax-border-radius-xlarge);
   border: 1px solid;
-  padding: var(--ax-spacing-4);
+  padding: var(--ax-spacing-4) var(--ax-spacing-5);
   display: flex;
   gap: var(--ax-spacing-3);
   align-items: center;
@@ -25,7 +25,7 @@
 }
 
 .navds-alert--small {
-  padding: var(--ax-spacing-2) var(--ax-spacing-4);
+  padding: var(--ax-spacing-3) var(--ax-spacing-4);
   gap: var(--ax-spacing-2);
 
   > .navds-alert__icon {

package/darkside/button.darkside.css

@@ -92,16 +92,16 @@
   &:is(:disabled, .navds-button--disabled) {
     background-color: var(--ax-bg-accent-strong);
   }
-}
 
-@media (forced-colors: active) {
-  .navds-button.navds-button--primary {
-    background-color: highlight;
-    color: highlighttext;
-  }
+  @media (forced-colors: active) {
+    &:not(:disabled) {
+      background-color: highlight;
+      color: highlighttext;
+    }
 
-  .navds-button.navds-button--primary span {
-    forced-color-adjust: none;
+    & span {
+      forced-color-adjust: none;
+    }
   }
 }
 
@@ -163,13 +163,12 @@
   --__axc-button-border-color: var(--ax-border-default);
 
   background-color: transparent;
-  color: var(--ax-text-neutral);
+  color: var(--ax-text-default);
 
   &:hover {
     --__axc-button-border-color: var(--ax-border-strong);
 
     background-color: var(--ax-bg-neutral-moderate-hoverA);
-    color: var(--ax-text-neutral-strong);
   }
 
   &:active {
@@ -215,11 +214,10 @@
  ****************************/
 .navds-button--tertiary-neutral {
   background-color: transparent;
-  color: var(--ax-text-neutral);
+  color: var(--ax-text-default);
 
   &:hover {
     background-color: var(--ax-bg-neutral-moderate-hoverA);
-    color: var(--ax-text-neutral-strong);
   }
 
   &:active {
@@ -287,14 +285,14 @@
     background-color: ButtonFace;
   }
 
-  .navds-button:hover {
+  .navds-button:not(:disabled):hover {
     background-color: highlighttext;
     border-color: highlight;
     color: highlight;
     box-shadow: none;
   }
 
-  .navds-button:hover span {
+  .navds-button:not(:disabled):hover span {
     forced-color-adjust: none;
   }
 

package/darkside/chat.darkside.css

@@ -54,7 +54,7 @@
 }
 
 .navds-chat__bubble {
-  padding: var(--ax-spacing-4);
+  padding: var(--ax-spacing-4) var(--ax-spacing-5);
   width: fit-content;
   background-color: var(--ax-bg-raised);
   display: flex;
@@ -66,7 +66,7 @@
 }
 
 .navds-chat--small .navds-chat__bubble {
-  padding: var(--ax-spacing-3);
+  padding: var(--ax-spacing-3) var(--ax-spacing-4);
 }
 
 /* -------------------------- Chat bubble variants -------------------------- */

package/darkside/date.darkside.css

@@ -1,106 +1,138 @@
 .navds-date {
-  padding: var(--a-spacing-4) var(--a-spacing-3);
-}
+  padding: var(--ax-spacing-4) var(--ax-spacing-3);
+
+  .rdp-day_range_middle {
+    &.rdp-day_disabled {
+      color: var(--ax-text-default);
+      background: var(--ax-bg-neutral-moderateA);
+    }
+
+    &.rdp-day_selected {
+      background-color: var(--ax-bg-accent-moderateA);
+      box-shadow: inset 0 0 0 1px var(--ax-border-accent-subtleA);
+      color: var(--ax-text-default);
+    }
+  }
 
-.navds-date .rdp-day_range_middle.rdp-day_disabled {
-  color: var(--ac-date-middle-text, var(--a-text-on-action));
-  background: var(--ac-date-middle-bg, var(--a-surface-action-selected));
-}
+  .rdp-month,
+  &.rdp-month {
+    display: grid;
+    gap: var(--ax-spacing-5);
+  }
 
-.navds-date .rdp-month,
-.navds-date.rdp-month {
-  display: grid;
-  gap: var(--a-spacing-5);
-}
+  .navds-date__caption-label {
+    text-transform: capitalize;
+  }
 
-.navds-date__caption-label {
-  text-transform: capitalize;
-}
+  .rdp-head_cell {
+    text-transform: capitalize;
+    font-size: var(--ax-font-size-small);
+  }
 
-.navds-date .rdp-head_cell {
-  text-transform: capitalize;
-  font-size: var(--a-font-size-small);
-}
+  .rdp-button {
+    all: unset;
+    display: block;
+    width: 2.5rem;
+    height: 2.5rem;
+    text-align: center;
+    border-radius: var(--ax-border-radius-medium);
+  }
 
-.navds-date .rdp-weeknumber {
-  font-size: var(--a-font-size-small);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 2rem;
-  height: 2rem;
-  border-radius: var(--a-border-radius-medium);
-  margin: var(--a-spacing-2);
-  color: var(--a-text-subtle);
-}
+  .rdp-day_range_start {
+    border-radius: var(--ax-border-radius-xlarge) var(--ax-border-radius-medium) var(--ax-border-radius-medium)
+      var(--ax-border-radius-xlarge);
+  }
 
-.navds-date .rdp-weeknumber.rdp-button {
-  width: 2rem;
-  height: 2rem;
-  box-shadow: 0 0 0 1px var(--a-border-default);
-  color: var(--a-text-subtle);
-  font-size: var(--a-font-size-small);
-}
+  .rdp-day_range_end:not(.rdp-day_range_start) {
+    border-radius: var(--ax-border-radius-medium) var(--ax-border-radius-xlarge) var(--ax-border-radius-xlarge)
+      var(--ax-border-radius-medium);
+  }
 
-.navds-date .rdp-weeknumber.rdp-button:active {
-  background-color: var(--a-surface-action-active);
-  color: var(--a-text-on-action);
-  box-shadow: none;
-}
+  .rdp-day_range_start.rdp-day_range_end {
+    border-radius: var(--ax-border-radius-xlarge);
+  }
 
-.navds-date__caption__month .navds-select__container select {
-  text-transform: capitalize;
-}
+  .navds-date__field {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    position: relative;
+  }
 
-.navds-date .rdp-button {
-  all: unset;
-  display: block;
-  width: 2.5rem;
-  height: 2.5rem;
-  text-align: center;
-  border-radius: var(--a-border-radius-medium);
-}
+  .rdp-day_selected,
+  .navds-monthpicker__month--selected {
+    color: var(--ax-text-accent-contrast);
+    background: var(--ax-bg-accent-strong-pressed);
+    cursor: pointer;
+  }
 
-.navds-date .rdp-day_range_start {
-  border-radius: var(--a-border-radius-xlarge) var(--a-border-radius-medium) var(--a-border-radius-medium)
-    var(--a-border-radius-xlarge);
-}
+  .rdp-day_disabled {
+    cursor: not-allowed;
+    text-decoration: line-through;
+    background-color: var(--ax-bg-neutral-moderateA);
+    color: var(--ax-text-subtle);
+  }
 
-.navds-date .rdp-day_range_end:not(.rdp-day_range_start) {
-  border-radius: var(--a-border-radius-medium) var(--a-border-radius-xlarge) var(--a-border-radius-xlarge)
-    var(--a-border-radius-medium);
-}
+  .rdp-button:where(:not(.rdp-day_selected, [disabled])):hover,
+  .navds-date__month-button:where(:not(.rdp-day_selected, [disabled])):hover {
+    background: var(--ax-bg-accent-moderate-hoverA);
+    cursor: pointer;
+  }
 
-.navds-date .rdp-day_range_start.rdp-day_range_end {
-  border-radius: var(--a-border-radius-xlarge);
-}
+  .rdp-day_today {
+    position: relative;
+
+    &::before {
+      width: 6px;
+      height: 6px;
+      display: block;
+      background-color: var(--ax-text-accent);
+      border-radius: var(--ax-border-radius-full);
+      content: "";
+      position: absolute;
+      bottom: 5px;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+
+    &.rdp-day_selected:not(.rdp-day_range_middle),
+    &:active {
+      &::before {
+        background-color: var(--ax-text-accent-contrast);
+      }
+    }
+  }
 
-.navds-date .rdp-button:not(.rdp-day_selected, [disabled]):focus-visible,
-.navds-date .navds-date__month-button:not(.rdp-day_selected, [disabled]):focus-visible {
-  box-shadow: var(--a-shadow-focus);
-}
+  .rdp-day_outside {
+    visibility: hidden;
+    pointer-events: none;
+  }
 
-@supports not selector(:focus-visible) {
-  .navds-date .rdp-button:not(.rdp-day_selected, [disabled]):focus,
-  .navds-date .navds-date__month-button:not(.rdp-day_selected, [disabled]):focus {
-    box-shadow: var(--a-shadow-focus);
+  .navds-date__modal & {
+    padding: 0;
+  }
+
+  .navds-date__modal-body > & {
+    padding: 0;
   }
 }
 
-.navds-date .rdp-button.rdp-day_selected:not([disabled]):focus-visible,
-.navds-date .navds-date__month-button.rdp-day_selected:not([disabled]):focus-visible {
-  box-shadow:
-    inset 0 0 0 1px var(--a-surface-default),
-    var(--a-shadow-focus);
+.navds-date__caption {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--ax-spacing-1);
+  padding-inline: var(--ax-spacing-1);
 }
 
-@supports not selector(:focus-visible) {
-  .navds-date .rdp-button.rdp-day_selected:not([disabled]):focus,
-  .navds-date .navds-date__month-button.rdp-day_selected:not([disabled]):focus {
-    box-shadow:
-      inset 0 0 0 1px var(--a-surface-default),
-      var(--a-shadow-focus);
-  }
+.navds-date__caption-button {
+  width: 2rem;
+  height: 2rem;
+  color: var(--ax-text-default);
+}
+
+.navds-date__caption__month .navds-select__container select {
+  text-transform: capitalize;
 }
 
 /* Monthpicker */
@@ -110,24 +142,10 @@
   width: 3rem;
   height: 3rem;
   text-transform: capitalize;
-  border-radius: var(--a-border-radius-medium);
+  border-radius: var(--ax-border-radius-medium);
   cursor: pointer;
 }
 
-.navds-date__month-button:focus-visible,
-.navds-monthpicker__caption-button:focus-visible {
-  box-shadow: var(--a-shadow-focus);
-  z-index: 1;
-}
-
-@supports not selector(:focus-visible) {
-  .navds-date__month-button:focus,
-  .navds-monthpicker__caption-button:focus {
-    box-shadow: var(--a-shadow-focus);
-    z-index: 1;
-  }
-}
-
 .navds-date__year-label {
   display: flex;
   align-items: center;
@@ -137,86 +155,28 @@
 .navds-date__standalone-wrapper {
   height: fit-content;
   width: fit-content;
-}
 
-.navds-date .navds-date__field {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  position: relative;
-}
-
-.navds-date__field-wrapper {
-  display: inline-flex;
-  align-items: center;
-  position: relative;
-  width: fit-content;
-}
-
-.navds-date .rdp-day_selected,
-.navds-monthpicker__month--selected {
-  color: var(--ac-date-selected-text, var(--a-text-on-action));
-  background: var(--ac-date-selected-bg, var(--a-surface-action-selected));
-  cursor: pointer;
-}
-
-.navds-date .rdp-day_disabled {
-  cursor: not-allowed;
-  text-decoration: line-through;
-  background-color: var(--ac-date-disabled-bg, var(--a-surface-neutral-subtle));
-  color: var(--ac-date-disabled-text, var(--a-text-subtle));
-}
-
-.navds-date .rdp-button:where(:not(.rdp-day_selected, [disabled])):hover,
-.navds-date__month-button:where(:not(.rdp-day_selected, [disabled])):hover {
-  background: var(--ac-date-hover-bg, var(--a-surface-action-subtle-hover));
-  cursor: pointer;
-}
-
-.navds-date .rdp-day_today {
-  box-shadow: 0 0 0 1px var(--ac-date-today-border, var(--a-border-action-selected));
-  text-decoration: underline;
-}
-
-.navds-date__caption {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: var(--a-spacing-1);
-  padding-inline: var(--a-spacing-1);
-}
-
-.navds-date__caption-button,
-.navds-date__caption-button:disabled,
-.navds-date__caption-button:disabled:hover {
-  color: var(--ac-date-caption-text, var(--a-text-default));
+  .rdp-cell > button.rdp-day,
+  button.navds-date__month-button {
+    &:focus-visible {
+      outline: 2px solid var(--ax-border-focus);
+      outline-offset: 1px;
+    }
+
+    &:active:not(:disabled) {
+      color: var(--ax-text-accent-contrast);
+      background-color: var(--ax-bg-accent-strong-pressed);
+    }
+  }
 }
 
 .navds-date__field-input {
-  padding-right: var(--a-spacing-12);
-}
-
-.navds-form-field--small .navds-date__field-input {
-  padding-right: var(--a-spacing-8);
-}
-
-/* Error-handling */
-.navds-date__field--error .navds-date__field-input:not(:hover, :disabled) {
-  border-color: var(--ac-date-input-error-border, var(--a-border-danger));
-  box-shadow: inset 0 0 0 1px var(--ac-date-input-error-border, var(--a-border-danger));
-}
-
-.navds-date__field--error .navds-date__field-input:focus-visible:not(:hover, :disabled) {
-  box-shadow:
-    inset 0 0 0 1px var(--ac-date-input-error-border, var(--a-border-danger)),
-    var(--a-shadow-focus);
-}
+  &.navds-text-field__input {
+    padding-right: var(--ax-spacing-12);
+  }
 
-@supports not selector(:focus-visible) {
-  .navds-date__field--error .navds-date__field-input:focus:not(:hover, :disabled) {
-    box-shadow:
-      inset 0 0 0 1px var(--ac-date-input-error-border, var(--a-border-danger)),
-      var(--a-shadow-focus);
+  .navds-form-field--small & {
+    padding-right: var(--ax-spacing-8);
   }
 }
 
@@ -225,74 +185,65 @@
   right: 0.0625rem;
   top: 50%;
   transform: translateY(-50%);
-  color: var(--ac-date-input-button-text, var(--a-text-default));
+  color: var(--ax-text-default);
   display: inline-flex;
   cursor: pointer;
   margin: 0;
   text-decoration: none;
   border: none;
   background: none;
-  border-radius: calc(var(--a-border-radius-medium) - 1px);
-  padding: var(--a-spacing-3);
+  border-radius: calc(var(--ax-border-radius-medium) - 1px);
+  padding: var(--ax-spacing-3);
   align-items: center;
   justify-content: center;
   font-size: 1.5rem;
   height: calc(100% - 0.125rem);
   border-start-start-radius: 0;
   border-end-start-radius: 0;
-}
-
-.navds-form-field--small .navds-date__field-button {
-  padding: var(--a-spacing-1);
-}
 
-.navds-date__field-button:hover:where(:not([disabled])) {
-  color: var(--ac-date-input-button-hover-text, var(--a-text-action-on-action-subtle));
-  background-color: var(--ac-date-input-button-hover-bg, var(--a-surface-action-subtle-hover));
-}
+  .navds-form-field--small & {
+    padding: var(--ax-spacing-1);
+  }
 
-.navds-form-field--disabled .navds-date__field-button {
-  opacity: 1;
-  cursor: not-allowed;
-}
+  .navds-form-field--disabled & {
+    opacity: 1;
+    cursor: not-allowed;
+  }
 
-.navds-date__field-button:focus-visible {
-  outline: none;
-  box-shadow: var(--a-shadow-focus);
-  border-radius: var(--a-border-radius-medium);
-}
+  /* Readonly */
+  .navds-date__field--readonly & {
+    cursor: default;
+  }
 
-@supports not selector(:focus-visible) {
-  .navds-date__field-button:focus {
-    outline: none;
-    box-shadow: var(--a-shadow-focus);
+  &:focus-visible {
+    outline-color: var(--ax-border-focus);
   }
 }
 
-.navds-date__caption__year {
-  width: 5rem;
+.navds-date__field-wrapper {
+  display: inline-flex;
+  align-items: center;
+  position: relative;
+  width: fit-content;
 }
 
-.navds-date .rdp-day_outside {
-  visibility: hidden;
-  pointer-events: none;
+.navds-date__week-row {
+  display: flex;
+  align-items: center;
+  gap: var(--ax-spacing-05);
 }
 
-/* Readonly */
-.navds-date__field--readonly .navds-date__field-button {
-  cursor: default;
-  color: var(--a-gray-500);
+.navds-date__weeknumber {
+  --__axc-button-border-width: 1px;
 }
 
-.navds-date__caption-button {
-  width: 2rem;
-  height: 2rem;
-}
+.navds-date__weeknumber-number {
+  font-size: 0.875rem;
+  color: var(--ax-text-subtle);
 
-.navds-date__week-row {
-  display: flex;
-  align-items: center;
-  gap: var(--a-spacing-05);
+  .navds-date__weeknumber:active & {
+    color: var(--ax-text-neutral-contrast);
+  }
 }
 
 .navds-date__week-wrapper {
@@ -303,37 +254,25 @@
   margin: 0;
 }
 
-.navds-date__modal.navds-date {
-  padding: 0;
-}
-
 .navds-date__modal-body {
   display: flex;
   flex-direction: column;
   align-items: flex-end;
-  padding: var(--a-spacing-4);
-  gap: var(--a-spacing-2);
-}
-
-.navds-date__modal-body > .navds-date {
-  padding: 0;
-}
-
-.navds-date__popover:where(.navds-popover) {
-  border: none;
+  padding: var(--ax-spacing-4);
+  gap: var(--ax-spacing-2);
 }
 
 @media (min-width: 480px) {
   .navds-date {
-    padding: var(--a-spacing-5) var(--a-spacing-4);
+    padding: var(--ax-spacing-5) var(--ax-spacing-4);
   }
 
   .navds-date__modal-body {
-    padding: var(--a-spacing-6);
+    padding: var(--ax-spacing-6);
   }
 
   .navds-date__caption {
-    gap: var(--a-spacing-2);
+    gap: var(--ax-spacing-2);
   }
 
   .navds-date .rdp-button,

package/darkside/expansioncard.darkside.css

@@ -17,6 +17,7 @@
 /* ------------------------ ExpansionCard Small-size ------------------------ */
 .navds-expansioncard--small {
   --__axc-expansioncard-padding-inline: var(--ax-spacing-4);
+  --__axc-expansioncard-padding-block: var(--ax-spacing-3);
 
   & > .navds-expansioncard__header .navds-expansioncard__title--small {
     margin-top: var(--ax-spacing-05);

package/darkside/form/error-summary.darkside.css

@@ -1,6 +1,6 @@
 .navds-error-summary {
   background-color: var(--ax-bg-default);
-  padding: var(--ax-spacing-5);
+  padding: var(--ax-spacing-4) var(--ax-spacing-5);
   border: 4px solid var(--ax-border-danger);
   border-radius: var(--ax-border-radius-xlarge);
   outline-offset: 2px;
@@ -18,7 +18,7 @@
 }
 
 .navds-error-summary--small {
-  padding: var(--ax-spacing-3);
+  padding: var(--ax-spacing-3) var(--ax-spacing-4);
 
   & .navds-error-summary__heading {
     scroll-margin-top: var(--ax-spacing-4);

package/darkside/form/file-upload.darkside.css

@@ -1,7 +1,6 @@
 /* --------------------------- FileUpload Dropzone -------------------------- */
 .navds-dropzone__area {
   --__axc-dropzone-background: var(--ax-bg-input);
-  --__axc-dropzone-padding: var(--ax-spacing-6);
   --__axc-dropzone-icon-padding: var(--ax-spacing-2);
   --__axc-dropzone-animation-length-long: 400ms;
   --__axc-dropzone-animation-length-short: 250ms;
@@ -15,7 +14,7 @@
   flex-direction: column;
   gap: var(--ax-spacing-4);
   text-align: center;
-  padding: var(--__axc-dropzone-padding);
+  padding: var(--ax-spacing-4) var(--ax-spacing-5);
   border: 1px dashed var(--ax-border-default);
   border-radius: var(--ax-border-radius-xlarge);
   background-color: var(--__axc-dropzone-background);
@@ -95,7 +94,7 @@
 }
 
 .navds-dropzone__area-release {
-  top: var(--__axc-dropzone-padding);
+  top: var(--ax-spacing-4);
   display: grid;
   position: absolute;
   z-index: 1;
@@ -159,7 +158,7 @@ li.navds-file-item {
   outline-offset: -1px;
   transition: outline-color 250ms cubic-bezier(0, 0.3, 0.15, 1);
   border-radius: var(--ax-border-radius-xlarge);
-  padding: var(--ax-spacing-3);
+  padding: var(--ax-spacing-3) var(--ax-spacing-4);
   display: flex;
   gap: var(--ax-spacing-3);
   align-items: flex-start;

package/darkside/form/form-progress.darkside.css

@@ -51,7 +51,7 @@
 .navds-form-progress__stepper {
   border: 1px solid var(--ax-border-subtle);
   border-radius: var(--ax-border-radius-large);
-  padding: var(--ax-spacing-4);
+  padding: var(--ax-spacing-4) var(--ax-spacing-5);
   margin-top: var(--ax-spacing-1);
   background: var(--ax-bg-raised);
 }