@navikt/aksel-stylelint 4.12.0 → 5.0.0

package/dist/deprecations.js

@@ -20,4 +20,16 @@ exports.deprecations = [
         classes: ["navds-chips--icon-left"],
         message: "In v4.1.0 Chips. Toggle no longer handles special alignment for checkmark-icon, thus removing this class",
     },
+    {
+        classes: ["navds-modal__overlay"],
+        message: "Removed in v5.0.0, use `.navds-modal::backdrop` and `.navds-modal--polyfilled + .backdrop` instead",
+    },
+    {
+        classes: ["navds-modal__button--shake"],
+        message: "Removed in v5.0.0",
+    },
+    {
+        classes: ["navds-modal__content"],
+        message: "Renamed to `.navds-modal__body` in v5.0.0",
+    },
 ];

package/dist/index.css

@@ -1,7 +1,7 @@
 @charset "UTF-8";
 /**
  * Do not edit directly
- * Generated on Thu, 17 Aug 2023 12:27:08 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);
@@ -3365,6 +3365,14 @@ body,
 .navds-combobox__wrapper-inner:hover {
   cursor: text;
 }
+.navds-combobox--error .navds-text-field__input:not(:hover):not(:disabled) {
+  border-color: var(--ac-combobox-error-border, var(--a-border-danger));
+  box-shadow: 0 0 0 1px var(--ac-combobox-error-border, var(--a-border-danger));
+}
+.navds-combobox--error
+  .navds-text-field__input:not(:hover):not(:disabled):not(.navds-combobox__wrapper-inner--virtually-unfocused):focus-within {
+  box-shadow: 0 0 0 1px var(--ac-combobox-error-border, var(--a-border-danger)), var(--a-shadow-focus);
+}
 .navds-combobox__selected-options {
   gap: var(--a-spacing-2);
   align-items: center;
@@ -3946,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;
@@ -5447,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;
 }
@@ -5470,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;
@@ -5535,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 {
@@ -5548,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;
@@ -5598,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));

package/dist/tokens.json

@@ -196,7 +196,10 @@
   },
   "modal": {
     "--ac-modal-bg": "--a-surface-default",
-    "--ac-modal-backdrop": "--a-surface-backdrop"
+    "--ac-modal-border": "--a-border-subtle",
+    "--ac-modal-backdrop": "--a-surface-backdrop",
+    "--ac-modal-width-small": "450px",
+    "--ac-modal-width-medium": "700px"
   },
   "pagination": {
     "--ac-pagination-text": "--a-text-default",
@@ -388,7 +391,8 @@
     "--ac-combobox-list-item-selected-hover-bg": "--a-surface-action-subtle-hover",
     "--ac-combobox-list-item-loading-bg": "--a-surface-default",
     "--ac-combobox-list-item-hover-border-left": "--a-border-strong",
-    "--ac-combobox-list-item-selected-hover-border-left": "--a-border-focus"
+    "--ac-combobox-list-item-selected-hover-border-left": "--a-border-focus",
+    "--ac-combobox-error-border": "--a-border-danger"
   },
   "select": {
     "--ac-select-bg": "--a-surface-default",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/aksel-stylelint",
-  "version": "4.12.0",
+  "version": "5.0.0",
   "author": "Aksel | NAV",
   "homepage": "https://aksel.nav.no/grunnleggende/kode/stylelint",
   "repository": {
@@ -35,8 +35,8 @@
     "dev": "yarn watch:lint"
   },
   "devDependencies": {
-    "@navikt/ds-css": "^4.12.0",
-    "@navikt/ds-tokens": "^4.12.0",
+    "@navikt/ds-css": "^5.0.0",
+    "@navikt/ds-tokens": "^5.0.0",
     "@types/jest": "^29.0.0",
     "concurrently": "7.2.1",
     "copyfiles": "2.4.1",