@navikt/ds-css 7.10.0 → 7.11.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @navikt/ds-css
 
+## 7.11.0
+
+### Patch Changes
+
+- ExpansionCard: Removed dynamic padding on button-element. ([#3532](https://github.com/navikt/aksel/pull/3532))
+
+- Modal: Defaults to `margin: auto` for tailwind 4 support. ([#3532](https://github.com/navikt/aksel/pull/3532))
+
 ## 7.10.0
 
 ### Minor Changes

package/config/tests/bundle.test.ts

@@ -6,6 +6,7 @@ import { describe, expect, test } from "vitest";
  * Darkside config might have some new files added. We can skip these when checking for equality.
  */
 const newFiles = ["theme"];
+const deprecatedFiles = ["linkpanel"];
 
 describe("Check that old and new (darkside) bundle matches", () => {
   test("Darkside includes the same files as old bundle", () => {
@@ -27,6 +28,9 @@ describe("Check that old and new (darkside) bundle matches", () => {
 
     // Compare file names
     oldFiles.forEach((file) => {
+      if (deprecatedFiles.find((oldFile) => file.includes(oldFile))) {
+        return;
+      }
       expect(darksideFiles).toContain(file);
     });
 
@@ -39,8 +43,9 @@ describe("Check that old and new (darkside) bundle matches", () => {
 
     /**
      * Check that darkside has the same amount of files as old bundle
-     * (minus the new files * 2 since .min.css is also included)
      */
-    expect(darksideFiles.length - newFiles.length * 2).toBe(oldFiles.length);
+    expect(
+      darksideFiles.length - newFiles.length * 2 + deprecatedFiles.length * 2,
+    ).toBe(oldFiles.length);
   });
 });

package/darkside/accordion.darkside.css

@@ -45,8 +45,8 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--ax-border-focus);
-    outline-offset: 2px;
+    outline: 3px solid var(--ax-border-focus);
+    outline-offset: 3px;
     z-index: 1;
 
     &::before,
@@ -57,7 +57,7 @@
 }
 
 .navds-accordion--small .navds-accordion__header {
-  padding-block: var(--a-spacing-2);
+  padding-block: var(--ax-space-8);
 }
 
 .navds-accordion__header::before,
@@ -73,10 +73,6 @@
   background-color: var(--ax-border-subtleA);
 }
 
-.navds-accordion__item:last-child > .navds-accordion__content {
-  border-bottom: 1px solid transparent;
-}
-
 .navds-accordion__header::after {
   top: initial;
   bottom: 0;
@@ -115,67 +111,64 @@
 }
 
 /* ---------------------------- Accordion content --------------------------- */
-.navds-accordion__content {
-  --__acx-accordion-content-line-width: 2px;
-
-  padding-inline: var(--ax-space-24) var(--ax-space-12);
-  display: none;
-  overflow: hidden;
-  padding-block: 0;
-  max-height: 0;
-  border-color: transparent;
-  transition: all 250ms cubic-bezier(0.2, 0, 0, 1) allow-discrete;
-  animation: navds-accordion-content-animation 250ms cubic-bezier(0.2, 0, 0, 1);
-}
-
-.navds-accordion__item--no-animation {
-  animation: none;
-}
 
-@keyframes navds-accordion-content-animation {
-  0% {
-    opacity: 0.01;
-  }
-
-  20% {
-    opacity: 0.01;
-  }
+.navds-accordion--indent > .navds-accordion__item .navds-accordion__content-inner {
+  padding-block: var(--ax-space-8);
+  padding-inline: calc(var(--ax-space-20) + 2px) var(--ax-space-20);
 
-  100% {
-    opacity: 1;
+  @media (forced-colors: active) {
+    border-left: 1px solid canvastext;
   }
 }
 
 .navds-accordion--indent > .navds-accordion__item > .navds-accordion__content {
-  padding-inline: var(--ax-space-24) var(--ax-space-12);
+  box-shadow: -2px 0 0 0 var(--ax-border-subtleA);
 }
 
-.navds-accordion--indent > .navds-accordion__item .navds-accordion__content-inner {
-  box-shadow: -2px 0 0 0 var(--ax-border-subtleA);
-  padding-block: var(--ax-space-8);
+.navds-accordion__item {
+  & > .navds-accordion__content {
+    display: grid;
+    grid-template-rows: 0fr;
+    visibility: hidden;
+    overflow: hidden;
+    margin-inline: var(--ax-space-24) var(--ax-space-12);
+    margin-block: 0;
+    transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
+    transition-duration: 250ms;
+    transition-property: visibility, opacity, grid-template-rows, margin, min-height;
+    border-color: transparent;
+    opacity: 0;
 
-  /* Aligns content with heading-section */
-  padding-inline: calc(var(--ax-space-20) + 2px) var(--ax-space-20);
+    & .navds-accordion__content-inner {
+      min-height: 0;
+      padding-block: 0;
+    }
+  }
 
-  @media (forced-colors: active) {
-    border-left: 1px solid canvastext;
+  &[data-expanded="true"] {
+    & > .navds-accordion__content {
+      grid-template-rows: 1fr;
+      visibility: visible;
+      margin-block: var(--ax-space-8);
+      margin-block-end: var(--ax-space-24);
+      border-color: var(--ax-border-subtleA);
+      opacity: 1;
+
+      & .navds-accordion__content-inner {
+        min-height: fit-content;
+      }
+    }
+
+    &:last-child {
+      border-bottom: 1px solid var(--ax-border-subtleA);
+    }
   }
 }
 
-.navds-accordion__item[data-expanded="true"] > .navds-accordion__content {
-  display: block;
-  opacity: 1;
-  overflow: visible;
-  max-height: fit-content;
-  padding-block: var(--ax-space-8);
-  padding-block-end: var(--ax-space-24);
-  border-color: var(--ax-border-subtleA);
-}
+/* ---------------- Accordion No Animation (defaultOpen) ---------------- */
 
-@starting-style {
-  .navds-accordion__item[data-expanded="true"]:not(.navds-accordion__item--no-animation) > .navds-accordion__content {
-    padding-block: 0;
-    max-height: 0;
-    border-color: transparent;
+.navds-accordion__item--no-animation {
+  & > .navds-accordion__content {
+    transition: none;
   }
 }

package/darkside/action-menu.darkside.css

@@ -1,7 +1,7 @@
 /* --------------------------- ActionMenu content --------------------------- */
 .navds-action-menu__content {
   overflow: hidden;
-  border-radius: var(--ax-border-radius-large);
+  border-radius: var(--ax-border-radius-xlarge);
   border: 1px solid var(--ax-border-subtleA);
   box-shadow: var(--ax-shadow-dialog);
   transition: transform 250ms cubic-bezier(0, 0, 0, 1) allow-discrete;
@@ -39,7 +39,7 @@
   --__axc-action-menu-item-pl: var(--ax-space-8);
   --__axc-action-menu-item-height: 2rem;
 
-  border-radius: var(--ax-border-radius-large);
+  border-radius: var(--ax-border-radius-xlarge);
   background-color: var(--ax-bg-raised);
   min-width: 128px;
   max-width: min(95vw, 640px);
@@ -60,7 +60,7 @@
   gap: var(--ax-space-8);
   min-height: var(--__axc-action-menu-item-height);
   cursor: default;
-  border-radius: var(--ax-border-radius-medium);
+  border-radius: var(--ax-border-radius-large);
   position: relative;
   padding-left: var(--__axc-action-menu-item-pl);
   padding-right: var(--__axc-action-menu-item-pr);

package/darkside/baseline/fonts.darkside.css

@@ -2,7 +2,7 @@
 @font-face {
   font-family: "Source Sans 3";
   font-style: italic;
-  font-weight: 400 600;
+  font-weight: 400 650;
   font-display: swap;
   src: url(https://cdn.nav.no/aksel/fonts/SourceSans3-italic-cyrillic_ext.woff2) format("woff2");
   unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
@@ -12,7 +12,7 @@
 @font-face {
   font-family: "Source Sans 3";
   font-style: italic;
-  font-weight: 400 600;
+  font-weight: 400 650;
   font-display: swap;
   src: url(https://cdn.nav.no/aksel/fonts/SourceSans3-italic-cyrillic.woff2) format("woff2");
   unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
@@ -22,7 +22,7 @@
 @font-face {
   font-family: "Source Sans 3";
   font-style: italic;
-  font-weight: 400 600;
+  font-weight: 400 650;
   font-display: swap;
   src: url(https://cdn.nav.no/aksel/fonts/SourceSans3-italic-latin_ext.woff2) format("woff2");
   unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
@@ -33,7 +33,7 @@
 @font-face {
   font-family: "Source Sans 3";
   font-style: italic;
-  font-weight: 400 600;
+  font-weight: 400 650;
   font-display: swap;
   src: url(https://cdn.nav.no/aksel/fonts/SourceSans3-italic.woff2) format("woff2");
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
@@ -44,7 +44,7 @@
 @font-face {
   font-family: "Source Sans 3";
   font-style: normal;
-  font-weight: 400 600;
+  font-weight: 400 650;
   font-display: swap;
   src: url(https://cdn.nav.no/aksel/fonts/SourceSans3-normal-cyrillic_ext.woff2) format("woff2");
   unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
@@ -54,7 +54,7 @@
 @font-face {
   font-family: "Source Sans 3";
   font-style: normal;
-  font-weight: 400 600;
+  font-weight: 400 650;
   font-display: swap;
   src: url(https://cdn.nav.no/aksel/fonts/SourceSans3-normal-cyrillic.woff2) format("woff2");
   unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
@@ -64,7 +64,7 @@
 @font-face {
   font-family: "Source Sans 3";
   font-style: normal;
-  font-weight: 400 600;
+  font-weight: 400 650;
   font-display: swap;
   src: url(https://cdn.nav.no/aksel/fonts/SourceSans3-normal-latin_ext.woff2) format("woff2");
   unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
@@ -75,7 +75,7 @@
 @font-face {
   font-family: "Source Sans 3";
   font-style: normal;
-  font-weight: 400 600;
+  font-weight: 400 650;
   font-display: swap;
   src: url(https://cdn.nav.no/aksel/fonts/SourceSans3-normal.woff2) format("woff2");
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
@@ -88,7 +88,7 @@
 @font-face {
   font-family: "Source Sans Pro";
   font-style: italic;
-  font-weight: 400 600;
+  font-weight: 400 650;
   font-display: swap;
   src: url(https://cdn.nav.no/aksel/fonts/SourceSans3-italic-latin_ext.woff2) format("woff2");
   unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
@@ -99,7 +99,7 @@
 @font-face {
   font-family: "Source Sans Pro";
   font-style: italic;
-  font-weight: 400 600;
+  font-weight: 400 650;
   font-display: swap;
   src: url(https://cdn.nav.no/aksel/fonts/SourceSans3-italic.woff2) format("woff2");
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
@@ -110,7 +110,7 @@
 @font-face {
   font-family: "Source Sans Pro";
   font-style: normal;
-  font-weight: 400 600;
+  font-weight: 400 650;
   font-display: swap;
   src: url(https://cdn.nav.no/aksel/fonts/SourceSans3-normal-latin_ext.woff2) format("woff2");
   unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
@@ -121,7 +121,7 @@
 @font-face {
   font-family: "Source Sans Pro";
   font-style: normal;
-  font-weight: 400 600;
+  font-weight: 400 650;
   font-display: swap;
   src: url(https://cdn.nav.no/aksel/fonts/SourceSans3-normal.woff2) format("woff2");
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,

package/darkside/button.darkside.css

@@ -5,7 +5,7 @@
   --__axc-button-border-width: 2px;
 
   padding: var(--ax-space-12) var(--ax-space-20);
-  border-radius: var(--ax-border-radius-medium);
+  border-radius: var(--ax-border-radius-large);
   display: inline-flex;
   cursor: pointer;
   text-decoration: none;
@@ -55,7 +55,7 @@
 
 @supports not selector(:focus-visible) {
   .navds-button:focus {
-    outline: 2px solid var(--ax-border-focus);
+    outline: 3px solid var(--ax-border-focus);
   }
 }
 
@@ -161,7 +161,7 @@
 * .navds-button--secondary-neutral *
  **************************/
 .navds-button--secondary-neutral {
-  --__axc-button-border-color: var(--ax-border-strong);
+  --__axc-button-border-color: var(--ax-border-default);
 
   background-color: transparent;
   color: var(--ax-text-default);
@@ -180,7 +180,7 @@
   }
 
   &:is(:disabled, .navds-button--disabled) {
-    --__axc-button-border-color: var(--ax-border-strong);
+    --__axc-button-border-color: var(--ax-border-default);
 
     color: var(--ax-text-default);
     background-color: transparent;

package/darkside/chips.darkside.css

@@ -28,8 +28,8 @@
   min-height: 2rem;
 
   &:focus-visible {
-    outline: 2px solid var(--ax-border-focus);
-    outline-offset: 2px;
+    outline: 3px solid var(--ax-border-focus);
+    outline-offset: 3px;
   }
 }
 

package/darkside/copybutton.darkside.css

@@ -5,7 +5,7 @@
   margin: 0;
   text-decoration: none;
   border: none;
-  border-radius: var(--ax-border-radius-medium);
+  border-radius: var(--ax-border-radius-large);
   padding: var(--__axc-copybutton-padding);
   display: grid;
   place-content: center;
@@ -25,8 +25,8 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--ax-border-focus);
-    outline-offset: 2px;
+    outline: 3px solid var(--ax-border-focus);
+    outline-offset: 3px;
   }
 
   &:disabled {

package/darkside/date.darkside.css

@@ -35,21 +35,19 @@
     width: 2.5rem;
     height: 2.5rem;
     text-align: center;
-    border-radius: var(--ax-border-radius-medium);
+    border-radius: var(--ax-border-radius-large);
   }
 
   .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);
+    border-radius: 100% var(--ax-border-radius-xlarge) var(--ax-border-radius-xlarge) 100%;
   }
 
   .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);
+    border-radius: var(--ax-border-radius-large) 100% 100% var(--ax-border-radius-large);
   }
 
   .rdp-day_range_start.rdp-day_range_end {
-    border-radius: var(--ax-border-radius-xlarge);
+    border-radius: var(--ax-border-radius-large);
   }
 
   .navds-date__field {
@@ -142,7 +140,7 @@
   width: 3rem;
   height: 3rem;
   text-transform: capitalize;
-  border-radius: var(--ax-border-radius-medium);
+  border-radius: var(--ax-border-radius-large);
   cursor: pointer;
 }
 
@@ -159,8 +157,8 @@
   .rdp-cell > button.rdp-day,
   button.navds-date__month-button {
     &:focus-visible {
-      outline: 2px solid var(--ax-border-focus);
-      outline-offset: 1px;
+      outline: 3px solid var(--ax-border-focus);
+      outline-offset: 3px;
     }
 
     &:active:not(:disabled) {
@@ -192,7 +190,7 @@
   text-decoration: none;
   border: none;
   background: none;
-  border-radius: calc(var(--ax-border-radius-medium) - 1px);
+  border-radius: calc(var(--ax-border-radius-large) - 1px);
   padding: var(--ax-space-12);
   align-items: center;
   justify-content: center;

package/darkside/expansioncard.darkside.css

@@ -1,6 +1,6 @@
 .navds-expansioncard {
   --__axc-expansioncard-border-radius: calc(var(--ax-border-radius-xlarge) - 1px);
-  --__axc-expansioncard-padding-block: var(--ax-space-16);
+  --__axc-expansioncard-padding-block: var(--ax-space-20);
   --__axc-expansioncard-padding-inline: var(--ax-space-20);
 
   border-radius: var(--ax-border-radius-xlarge);
@@ -17,7 +17,7 @@
 /* ------------------------ ExpansionCard Small-size ------------------------ */
 .navds-expansioncard--small {
   --__axc-expansioncard-padding-inline: var(--ax-space-16);
-  --__axc-expansioncard-padding-block: var(--ax-space-12);
+  --__axc-expansioncard-padding-block: var(--ax-space-16);
 
   & > .navds-expansioncard__header .navds-expansioncard__title--small {
     margin-top: var(--ax-space-2);
@@ -45,7 +45,7 @@
   justify-content: space-between;
 
   &:hover {
-    background-color: var(--ax-bg-hover);
+    background-color: var(--ax-bg-hoverA);
   }
 
   &[data-open="true"] {
@@ -55,7 +55,7 @@
     /* Divider between header and content */
     &::after {
       content: "";
-      background-color: var(--ax-border-subtle);
+      background-color: var(--ax-border-subtleA);
       bottom: 0;
       left: var(--__axc-expansioncard-padding-inline);
       height: 1px;
@@ -98,15 +98,7 @@
   align-self: flex-start;
 
   &:focus-visible {
-    outline: 2px solid var(--ax-border-focus);
-    outline-offset: 2px;
-  }
-
-  @supports not selector(:focus-visible) {
-    &:focus {
-      outline: 2px solid var(--ax-border-focus);
-      outline-offset: 2px;
-    }
+    outline: 3px solid var(--ax-border-focus);
   }
 
   /* Makes the whole header clickable */

package/darkside/form/combobox.darkside.css

@@ -10,7 +10,7 @@
   flex-direction: column;
   width: 100%;
   position: relative;
-  border-radius: var(--ax-border-radius-medium);
+  border-radius: var(--ax-border-radius-large);
 }
 
 .navds-form-field:not(:is(.navds-combobox--disabled, .navds-combobox--readonly)) {
@@ -81,7 +81,7 @@
 
 .navds-combobox__wrapper-inner {
   border: 1px solid var(--ax-border-default);
-  border-radius: var(--ax-border-radius-medium);
+  border-radius: var(--ax-border-radius-large);
 
   &:has(.navds-combobox__input:focus-visible) {
     outline: 3px solid var(--ax-border-focus);
@@ -215,7 +215,6 @@
 }
 
 .navds-combobox__button-toggle-list {
-  border-radius: var(--ax-border-radius-medium);
   color: var(--ax-text-default);
   display: flex;
   justify-content: center;
@@ -273,7 +272,7 @@
   justify-content: space-between;
   padding-block: var(--__axc-combobox-list-item-padding-block);
   padding-inline: var(--__axc-combobox-list-item-padding-inline);
-  border-radius: var(--ax-border-radius-medium);
+  border-radius: var(--ax-border-radius-large);
   border: 0;
   margin-inline: var(--ax-space-8);
   margin-block: var(--ax-space-2);

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

@@ -3,17 +3,17 @@
   padding: var(--ax-space-16) var(--ax-space-20);
   border: 4px solid var(--ax-border-danger);
   border-radius: var(--ax-border-radius-xlarge);
-  outline-offset: 2px;
+  outline-offset: 3px;
 
   &:focus-visible,
   &:has(.navds-error-summary__heading:focus-visible) {
-    outline: 2px solid var(--ax-border-focus);
+    outline: 3px solid var(--ax-border-focus);
   }
 }
 
 @supports not selector(:focus-visible) {
   .navds-error-summary:focus {
-    outline: 2px solid var(--ax-border-focus);
+    outline: 3px solid var(--ax-border-focus);
   }
 }
 

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

@@ -26,19 +26,23 @@
     border-color: var(--ax-border-accent-strong);
 
     & > .navds-dropzone__area-button {
-      color: var(--ax-text-accent-strong);
       background-color: var(--ax-bg-accent-moderate-hover);
       box-shadow: inset 0 0 0 2px var(--ax-bg-accent-strong-hover);
     }
   }
 
-  &:active .navds-dropzone__area-button {
-    background-color: var(--ax-bg-accent-strong-pressed);
-    color: var(--ax-text-accent-contrast);
-    box-shadow: none;
+  &:active:not([data-disabled="true"]) {
+    & > .navds-dropzone__area-button {
+      background-color: var(--ax-bg-accent-strong-pressed);
+      color: var(--ax-text-accent-contrast);
+      box-shadow: none;
+    }
   }
 
   &[data-disabled="true"] {
+    --__axc-dropzone-background: var(--ax-bg-soft);
+
+    border-color: var(--ax-border-subtleA);
     cursor: default;
   }
 }
@@ -130,7 +134,7 @@
 }
 
 .navds-dropzone--dragging .navds-dropzone__area-release {
-  color: var(--ax-text-accent-strong);
+  color: var(--ax-text-accent);
   top: 50%;
   transform: translateY(-50%);
 }
@@ -198,7 +202,6 @@ li.navds-file-item {
 }
 
 .navds-file-item__error {
-  color: var(--ax-text-danger);
   display: grid;
   transition-property: grid-template-rows, padding-top;
   transition-duration: 250ms;
@@ -206,20 +209,8 @@ li.navds-file-item {
   overflow: hidden;
   grid-template-rows: 0fr;
 
-  & .navds-file-item__error {
+  .navds-file-item--error & {
     grid-template-rows: 1fr;
     padding-top: var(--ax-space-4);
   }
 }
-
-.navds-file-item__error-content {
-  min-height: 0;
-  display: flex;
-  gap: var(--ax-space-4);
-
-  & > svg {
-    flex-shrink: 0;
-    height: 1rem;
-    margin-top: 0.1rem;
-  }
-}

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

@@ -50,7 +50,7 @@
 
 .navds-form-progress__stepper {
   border: 1px solid var(--ax-border-subtle);
-  border-radius: var(--ax-border-radius-large);
+  border-radius: var(--ax-border-radius-xlarge);
   padding: var(--ax-space-16) var(--ax-space-20);
   margin-top: var(--ax-space-4);
   background: var(--ax-bg-raised);