@navikt/ds-css 4.12.1 → 5.0.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @navikt/ds-css
 
+## 5.0.0
+
+### Major Changes
+
+- Oppdatert Modal - Se [Migrering](https://aksel.nav.no/grunnleggende/kode/migrering) ([#2135](https://github.com/navikt/aksel/pull/2135))
+
+  - :sparkles: Støtte for header og footer
+  - :boom: Bruker nå native dialog i stedet for react-modal (med polyfill for eldre nettlesere)
+
+### Patch Changes
+
+- Table: ExpandableRow har oppdatert knapp for å matche Accordion og ExpansionCard ([#2178](https://github.com/navikt/aksel/pull/2178))
+
+- Table: Alle størrelser har justert padding. Small-size table bruker nå også standard typografi-størrelse (18px). ([#2178](https://github.com/navikt/aksel/pull/2178))
+
 ## 4.12.1
 
 ### Patch Changes

package/config/_mappings.js

@@ -121,7 +121,7 @@ const StyleMappings = {
     {
       component: "Modal",
       main: "modal.css",
-      dependencies: ["button.css"],
+      dependencies: [typoCss, "button.css"],
     },
     {
       component: "Pagination",

package/dist/component/index.css

@@ -1,7 +1,7 @@
 @charset "UTF-8";
 /**
  * Do not edit directly
- * Generated on Thu, 17 Aug 2023 14:06:32 GMT
+ * Generated on Fri, 18 Aug 2023 09:44:10 GMT
  */
 :root, :host {
   --a-spacing-05: 0.125rem;
@@ -109,26 +109,26 @@
   --a-blue-200: rgba(153, 195, 255, 1);
   --a-blue-100: rgba(204, 225, 255, 1);
   --a-blue-50: rgba(230, 240, 255, 1);
-  --a-grayalpha-900: rgba(0, 0, 0, 0.85);
-  --a-grayalpha-800: rgba(0, 0, 0, 0.75);
-  --a-grayalpha-700: rgba(0, 0, 0, 0.65);
-  --a-grayalpha-600: rgba(0, 0, 0, 0.56);
-  --a-grayalpha-500: rgba(0, 0, 0, 0.44);
-  --a-grayalpha-400: rgba(0, 0, 0, 0.31);
-  --a-grayalpha-300: rgba(0, 0, 0, 0.19);
-  --a-grayalpha-200: rgba(0, 0, 0, 0.1);
-  --a-grayalpha-100: rgba(0, 0, 0, 0.05);
-  --a-grayalpha-50: rgba(0, 0, 0, 0.03);
-  --a-gray-900: rgba(38, 38, 38, 1);
-  --a-gray-800: rgba(64, 64, 64, 1);
-  --a-gray-700: rgba(89, 89, 89, 1);
-  --a-gray-600: rgba(112, 112, 112, 1);
-  --a-gray-500: rgba(143, 143, 143, 1);
-  --a-gray-400: rgba(176, 176, 176, 1);
-  --a-gray-300: rgba(207, 207, 207, 1);
-  --a-gray-200: rgba(229, 229, 229, 1);
-  --a-gray-100: rgba(241, 241, 241, 1);
-  --a-gray-50: rgba(247, 247, 247, 1);
+  --a-grayalpha-900: rgba(2, 5, 9, 0.87);
+  --a-grayalpha-800: rgba(3, 11, 22, 0.75);
+  --a-grayalpha-700: rgba(1, 11, 24, 0.68);
+  --a-grayalpha-600: rgba(2, 15, 34, 0.6);
+  --a-grayalpha-500: rgba(2, 20, 49, 0.49);
+  --a-grayalpha-400: rgba(5, 23, 51, 0.34);
+  --a-grayalpha-300: rgba(7, 26, 54, 0.21);
+  --a-grayalpha-200: rgba(17, 41, 64, 0.13);
+  --a-grayalpha-100: rgba(18, 43, 68, 0.08);
+  --a-grayalpha-50: rgba(38, 55, 89, 0.06);
+  --a-gray-900: rgba(35, 38, 42, 1);
+  --a-gray-800: rgba(66, 71, 79, 1);
+  --a-gray-700: rgba(82, 89, 98, 1);
+  --a-gray-600: rgba(103, 111, 123, 1);
+  --a-gray-500: rgba(131, 140, 154, 1);
+  --a-gray-400: rgba(170, 176, 186, 1);
+  --a-gray-300: rgba(203, 207, 213, 1);
+  --a-gray-200: rgba(224, 227, 230, 1);
+  --a-gray-100: rgba(236, 238, 240, 1);
+  --a-gray-50: rgba(242, 243, 245, 1);
   --a-nav-red: rgba(195, 0, 0, 1);
   --a-white: rgba(255, 255, 255, 1);
   --a-transparent: rgba(255, 255, 255, 0);
@@ -188,7 +188,7 @@
   --a-icon-success: var(--a-green-500);
   --a-icon-action: var(--a-blue-500);
   --a-icon-action-on-action-subtle: var(--a-blue-600);
-  --a-icon-action-selected: var(--a-deepblue-500);
+  --a-icon-action-selected: var(--a-blue-700);
   --a-icon-subtle: var(--a-grayalpha-700);
   --a-icon-default: var(--a-gray-900);
   --a-surface-alt-3: var(--a-deepblue-500);
@@ -228,16 +228,16 @@
   --a-surface-neutral-subtle: var(--a-grayalpha-100);
   --a-surface-neutral-subtle-hover: var(--a-grayalpha-200);
   --a-surface-action: var(--a-blue-500);
-  --a-surface-action-selected: var(--a-deepblue-500);
-  --a-surface-action-selected-hover: var(--a-deepblue-600);
-  --a-surface-action-active: var(--a-deepblue-500);
+  --a-surface-action-selected: var(--a-blue-700);
+  --a-surface-action-selected-hover: var(--a-blue-800);
+  --a-surface-action-active: var(--a-blue-700);
   --a-surface-action-hover: var(--a-blue-600);
   --a-surface-action-subtle: var(--a-blue-50);
   --a-surface-action-subtle-hover: var(--a-blue-100);
   --a-surface-inverted: var(--a-gray-900);
   --a-surface-inverted-active: var(--a-gray-700);
   --a-surface-inverted-hover: var(--a-gray-800);
-  --a-surface-backdrop: var(--a-grayalpha-700);
+  --a-surface-backdrop: var(--a-grayalpha-500);
   --a-surface-transparent: var(--a-transparent);
   --a-surface-subtle: var(--a-gray-50);
   --a-surface-selected: var(--a-blue-50);
@@ -258,7 +258,7 @@
   --a-text-on-inverted: var(--a-white);
   --a-text-action: var(--a-blue-500);
   --a-text-action-on-action-subtle: var(--a-blue-600);
-  --a-text-action-selected: var(--a-deepblue-500);
+  --a-text-action-selected: var(--a-blue-700);
   --a-text-danger: var(--a-red-500);
   --a-text-visited: var(--a-purple-500);
   --a-text-subtle: var(--a-grayalpha-700);
@@ -294,9 +294,9 @@
   --a-border-success: var(--a-green-500);
   --a-border-selected: var(--a-blue-500);
   --a-border-action: var(--a-blue-500);
-  --a-border-action-selected: var(--a-deepblue-500);
-  --a-border-subtle: var(--a-grayalpha-200);
-  --a-border-subtle-hover: var(--a-grayalpha-300);
+  --a-border-action-selected: var(--a-blue-700);
+  --a-border-subtle: var(--a-grayalpha-300);
+  --a-border-subtle-hover: var(--a-grayalpha-400);
   --a-border-divider: var(--a-grayalpha-300);
   --a-border-strong: var(--a-grayalpha-700);
   --a-border-default: var(--a-grayalpha-500);
@@ -3954,65 +3954,137 @@ button.navds-internalheader__title:active,
     stroke-dashoffset: -120px;
   }
 }
-.ReactModal__Body--open {
+.navds-modal__document-body {
   overflow: hidden;
 }
 .navds-modal {
   background-color: var(--ac-modal-bg, var(--a-surface-default));
-  border-radius: var(--a-border-radius-medium);
-  display: block;
-  position: relative;
-  overflow: auto;
-  max-height: 100%;
+  border: 1px solid var(--ac-modal-border, var(--a-border-subtle));
+  border-radius: var(--a-border-radius-large);
   box-shadow: var(--a-shadow-xlarge);
+  padding: 0;
+  position: fixed;
+  max-height: 100%;
+  max-width: 100%;
 }
-.navds-modal__content {
-  padding: var(--a-spacing-4);
+.navds-modal[open] {
+  display: flex;
+  flex-direction: column;
+  animation: akselModalFadeIn 0.35s cubic-bezier(0.15, 1, 0.3, 1);
 }
-.navds-modal:focus-visible,
-.navds-modal--focus {
-  box-shadow: var(--a-shadow-focus);
-  outline: none;
+.navds-modal--polyfilled {
+  top: 50%;
+  transform: translate(0, -50%);
+  overflow: auto;
+
+  /* From polyfill (dialog-polyfill/dist/dialog-polyfill.css): */
+  left: 0;
+  right: 0;
+  width: fit-content;
+  height: fit-content;
+  margin: auto;
 }
-@supports not selector(:focus-visible) {
-  .navds-modal:focus,
-  .navds-modal--focus {
-    box-shadow: var(--a-shadow-focus);
-    outline: none;
-  }
+.navds-modal--polyfilled:not([open]) {
+  display: none; /* from polyfill */
 }
-.navds-modal__overlay {
+._dialog_overlay {
+  /* From polyfill */
   position: fixed;
-  z-index: var(--a-z-index-modal);
   top: 0;
+  right: 0;
   bottom: 0;
   left: 0;
-  right: 0;
-  background-color: var(--ac-modal-backdrop, var(--a-surface-backdrop));
-  padding: var(--a-spacing-4);
-  display: flex;
-  align-items: center;
-  justify-content: center;
 }
-.navds-modal__button--shake {
-  transform: rotate(0deg);
-  transition: transform 100ms cubic-bezier(0.82, 2, 1, 0.3);
+.navds-modal--small {
+  width: var(--ac-modal-width-small, 450px);
 }
-/* prettier-ignore */
-.navds-modal__overlay:active > .navds-modal:not(:active) > .navds-modal__button--shake {
-  transform: rotate(10deg);
-  transition: transform 100ms cubic-bezier(0.82, -2, 1, 0.3);
+.navds-modal--medium {
+  width: var(--ac-modal-width-medium, 700px);
+}
+@media (min-width: 480px) {
+  .navds-modal {
+    max-width: calc((100% - 6px) - 2em);
+    max-height: calc((100% - 6px) - 2em);
+  }
+
+  .navds-modal--autowidth {
+    max-width: min(700px, calc((100% - 6px) - 2em));
+  }
+}
+.navds-modal::backdrop {
+  /*
+   * Cannot use --a-surface-backdrop because ::backdrop does not inherit from anything but itself.
+   * But consumers can do `::backdrop { --ac-modal-backdrop: white; }`
+   * We can add ::backdrop to tokens.css when we remove the polyfill.
+   */
+  background: var(--ac-modal-backdrop, rgb(2 20 49 / 0.49));
+  animation: akselModalBackdropFadeIn 0.35s cubic-bezier(0.15, 1, 0.3, 1);
+}
+.navds-modal--polyfilled + .backdrop /* Cannot be combined with ::backdrop selector */ {
+  background: var(--ac-modal-backdrop, rgb(2 20 49 / 0.49));
+
+  /* From polyfill: */
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
 }
 .navds-modal__button {
-  position: absolute;
-  top: var(--a-spacing-4);
-  right: var(--a-spacing-4);
+  margin-left: var(--a-spacing-4);
+  float: right;
+}
+.navds-modal__header {
+  padding: var(--a-spacing-6) var(--a-spacing-6) var(--a-spacing-4) var(--a-spacing-6);
+}
+.navds-modal__header-icon svg {
+  display: inline;
+  vertical-align: -0.25rem;
+  margin-right: var(--a-spacing-1);
+}
+.navds-modal__label {
+  font-weight: 600;
+  color: var(--a-text-subtle);
+}
+.navds-modal__body {
+  padding: var(--a-spacing-6);
+  overflow: auto;
+  overscroll-behavior: contain;
+}
+.navds-modal__header + .navds-modal__body {
+  padding-top: var(--a-spacing-0);
+}
+.navds-modal__footer {
   display: flex;
-  padding: var(--a-spacing-2);
+  flex-flow: row-reverse wrap;
+  gap: var(--a-spacing-4);
+  padding: var(--a-spacing-4) var(--a-spacing-6) var(--a-spacing-6) var(--a-spacing-6);
 }
-.navds-modal__button svg {
-  height: 1.5rem;
-  width: 1.5rem;
+.navds-modal__footer :nth-of-type(2) {
+  margin-left: auto;
+}
+@keyframes akselModalFadeIn {
+  from {
+    opacity: 0;
+    transform: translate3d(0, calc(5% + 4px), 0);
+  }
+
+  50% {
+    opacity: 1;
+  }
+
+  to {
+    transform: none;
+  }
+}
+@keyframes akselModalBackdropFadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
 }
 .navds-pagination__list {
   margin: 0;
@@ -5455,7 +5527,7 @@ button.navds-stepper__step {
 .navds-table__header-cell,
 .navds-table__data-cell {
   display: table-cell;
-  padding: var(--a-spacing-4) var(--a-spacing-3);
+  padding: var(--a-spacing-3) var(--a-spacing-2);
   border-bottom: 1px solid var(--ac-table-row-border, var(--a-border-default));
   text-align: left;
 }
@@ -5478,9 +5550,13 @@ button.navds-stepper__step {
 :where(.navds-table__expandable-row--open:hover) .navds-table__data-cell {
   border-bottom-color: transparent;
 }
+.navds-table--large .navds-table__header-cell,
+.navds-table--large .navds-table__data-cell {
+  padding: var(--a-spacing-4) var(--a-spacing-2);
+}
 .navds-table--small .navds-table__header-cell,
 .navds-table--small .navds-table__data-cell {
-  padding: var(--a-spacing-2) var(--a-spacing-3);
+  padding: var(--a-spacing-1) var(--a-spacing-2);
 }
 .navds-table .navds-checkbox .navds-checkbox__input {
   top: -0.75rem;
@@ -5543,7 +5619,7 @@ button.navds-stepper__step {
 .navds-table__expandable-row:not(.navds-table__expandable-row--open) .navds-table__data-cell {
   transition: border-bottom-color 190ms cubic-bezier(0.6, 0.04, 0.98, 0.335);
 }
-.navds-table__expandable-row:not(.navds-table__expandable-row--expansion-disabled):hover {
+.navds-table__expandable-row.navds-table__expandable-row--clickable:not(.navds-table__expandable-row--expansion-disabled):hover {
   cursor: pointer;
 }
 .navds-table__expandable-row--open .navds-table__data-cell {
@@ -5556,45 +5632,62 @@ button.navds-stepper__step {
   border-color: transparent;
 }
 .navds-table__toggle-expand-cell {
-  padding: 0;
-  width: 3.5rem;
+  padding: 0 var(--a-spacing-2);
+  position: relative;
+  width: 2.5rem;
+}
+.navds-table--large .navds-table__toggle-expand-cell {
+  padding: 0 var(--a-spacing-2);
 }
 .navds-table--small .navds-table__toggle-expand-cell {
-  padding: 0;
-  width: 2.25rem;
+  padding: var(--a-spacing-1) var(--a-spacing-2);
 }
 .navds-table__toggle-expand-button {
-  all: unset;
-  display: flex;
-  align-items: center;
+  display: grid;
+  place-content: center;
   cursor: pointer;
-  padding: var(--a-spacing-4);
+  margin: 0;
+  background: transparent;
+  border: none;
+  border-radius: var(--a-border-radius-medium);
+  height: 2rem;
+  width: 2rem;
+  font-size: 1.5rem;
 }
-.navds-table--small .navds-table__toggle-expand-button {
-  padding: var(--a-spacing-2);
+.navds-table__expandable-icon {
+  transition: transform 150ms ease-in-out;
 }
-.navds-table__toggle-expand-button:focus-visible {
-  box-shadow: inset var(--a-shadow-focus);
+.navds-table__toggle-expand-button:hover,
+.navds-table__expandable-row--clickable:hover .navds-table__toggle-expand-button {
+  background-color: var(--a-surface-hover);
 }
-@supports not selector(:focus-visible) {
-  .navds-table__toggle-expand-button:focus {
-    box-shadow: inset var(--a-shadow-focus);
-  }
+.navds-table__toggle-expand-cell--open > :where(.navds-table__toggle-expand-button) :where(.navds-table__expandable-icon) {
+  transform: translateY(0) rotate(180deg);
 }
-.navds-table__expandable-icon {
-  font-size: 1.5rem;
+.navds-table__toggle-expand-button:hover > :where(.navds-table__expandable-icon) {
+  transform: translateY(1px);
 }
-.navds-table--small .navds-table__expandable-icon {
-  font-size: 1.25rem;
+.navds-table__toggle-expand-cell--open > .navds-table__toggle-expand-button:hover > :where(.navds-table__expandable-icon) {
+  transform: translateY(-1px) rotate(180deg);
 }
-.navds-table__toggle-expand-button:hover .navds-table__expandable-icon {
-  transform: translateY(1px);
+.navds-table__toggle-expand-button:focus-visible {
+  outline: none;
+  box-shadow: var(--a-shadow-focus);
 }
-.navds-table__toggle-expand-cell--open .navds-table__expandable-icon {
-  transform: rotate(180deg);
+@supports not selector(:focus-visible) {
+  .navds-table__toggle-expand-button:focus {
+    outline: none;
+    box-shadow: var(--a-shadow-focus);
+  }
 }
-.navds-table__toggle-expand-cell--open .navds-table__toggle-expand-button:hover .navds-table__expandable-icon {
-  transform: translateY(-1px) rotate(180deg);
+.navds-table__toggle-expand-button::after {
+  inset: 0;
+  z-index: 1;
+  position: absolute;
+  content: "";
+  height: 100%;
+  width: 100%;
+  cursor: pointer;
 }
 .navds-table__expanded-row-cell {
   padding: 0;
@@ -5606,10 +5699,10 @@ button.navds-stepper__step {
   border-bottom: 1px solid var(--ac-table-row-border, var(--a-border-default));
 }
 .navds-table__expanded-row-content {
-  padding: var(--a-spacing-4) 4.25rem;
+  padding: var(--a-spacing-4) calc(var(--a-spacing-2) + 3rem);
 }
 .navds-table--small .navds-table__expanded-row-content {
-  padding: var(--a-spacing-2) var(--a-spacing-12);
+  padding: var(--a-spacing-2) calc(var(--a-spacing-2) + 3rem);
 }
 .navds-tabs__tablist-wrapper {
   box-shadow: inset 0 -1px 0 0 var(--ac-tabs-border, var(--a-border-divider));