@navikt/aksel-stylelint 4.0.0 → 4.1.1

package/dist/deprecations.js

@@ -16,4 +16,8 @@ exports.deprecations = [
         message: "Class were moved to '@navikt/ds-css' and renamed with 'navds'-prefix in v4.0.0. Docs: https://aksel.nav.no/grunnleggende/kode/endringslogg#h728704adeb59.",
         deprecatePrefix: true,
     },
+    {
+        classes: ["navds-chips--icon-left"],
+        message: "In v4.1.0 Chips. Toggle no longer handles special alignment for checkmark-icon, thus removing this class",
+    },
 ];

package/dist/index.css

@@ -1,7 +1,7 @@
 @charset "UTF-8";
 /**
  * Do not edit directly
- * Generated on Mon, 05 Jun 2023 14:08:10 GMT
+ * Generated on Thu, 08 Jun 2023 13:27:58 GMT
  */
 :root, :host {
   --a-spacing-05: 0.125rem;
@@ -189,7 +189,7 @@
   --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-subtle: var(--a-gray-600);
+  --a-icon-subtle: var(--a-grayalpha-700);
   --a-icon-default: var(--a-gray-900);
   --a-surface-alt-3: var(--a-deepblue-500);
   --a-surface-alt-3-strong: var(--a-deepblue-800);
@@ -261,8 +261,26 @@
   --a-text-action-selected: var(--a-deepblue-500);
   --a-text-danger: var(--a-red-500);
   --a-text-visited: var(--a-purple-500);
-  --a-text-subtle: var(--a-grayalpha-600);
+  --a-text-subtle: var(--a-grayalpha-700);
   --a-text-default: var(--a-gray-900);
+  --a-data-border-6: var(--a-purple-400);
+  --a-data-border-5: var(--a-green-400);
+  --a-data-border-4: var(--a-lightblue-700);
+  --a-data-border-3: var(--a-orange-600);
+  --a-data-border-2: var(--a-deepblue-500);
+  --a-data-border-1: var(--a-blue-400);
+  --a-data-surface-6-subtle: var(--a-purple-200);
+  --a-data-surface-6: var(--a-purple-400);
+  --a-data-surface-5-subtle: var(--a-green-200);
+  --a-data-surface-5: var(--a-green-400);
+  --a-data-surface-4-subtle: var(--a-lightblue-500);
+  --a-data-surface-4: var(--a-lightblue-700);
+  --a-data-surface-3-subtle: var(--a-orange-300);
+  --a-data-surface-3: var(--a-orange-600);
+  --a-data-surface-2-subtle: var(--a-deepblue-200);
+  --a-data-surface-2: var(--a-deepblue-500);
+  --a-data-surface-1-subtle: var(--a-blue-100);
+  --a-data-surface-1: var(--a-blue-400);
   --a-border-alt-3: var(--a-deepblue-500);
   --a-border-alt-2: var(--a-limegreen-700);
   --a-border-alt-1: var(--a-purple-400);
@@ -735,6 +753,8 @@ button,
   --ac-button-secondary-hover-bg: var(--a-gray-800);
   --ac-button-secondary-focus-border: var(--a-blue-200);
   --ac-button-secondary-active-bg: var(--a-gray-700);
+  --ac-form-description: var(--a-text-on-inverted);
+  --ac-form-description: var(--a-text-on-inverted);
   --ac-textfield-text: var(--a-text-on-inverted);
   --ac-textfield-bg: var(--a-surface-inverted);
   --ac-textfield-border: var(--a-border-on-inverted);
@@ -1243,9 +1263,12 @@ body,
  * Content *
  *************************/
 .navds-accordion__content {
-  padding: 0 var(--a-spacing-3) var(--a-spacing-5) var(--a-spacing-11);
+  padding: 0 var(--a-spacing-3) var(--a-spacing-5);
   animation: fadeAccordionContent 250ms ease;
 }
+.navds-accordion--indent > :where(.navds-accordion__item) > :where(.navds-accordion__content) {
+  padding: 0 var(--a-spacing-3) var(--a-spacing-5) var(--a-spacing-11);
+}
 .navds-accordion__content--closed {
   display: none;
 }
@@ -1770,7 +1793,7 @@ body,
   cursor: pointer;
   align-items: center;
   justify-content: center;
-  gap: var(--a-spacing-05);
+  gap: var(--a-spacing-1);
   margin: 0;
   padding: 0 var(--a-spacing-3);
   text-decoration: none;
@@ -1782,13 +1805,13 @@ body,
   padding: 0 var(--a-spacing-2);
 }
 .navds-chips__toggle {
-  box-shadow: inset 0 0 0 1px var(--ac-chip-toggle-border, var(--a-border-default));
-  background-color: var(--ac-chip-toggle-bg, var(--a-surface-neutral-subtle));
+  box-shadow: inset 0 0 0 1px var(--ac-chip-toggle-border, var(--a-border-subtle));
+  background-color: var(--ac-chip-toggle-bg, var(--a-surface-action-subtle));
   color: var(--ac-chip-toggle-text, var(--a-text-default));
 }
 .navds-chips__toggle:hover {
-  box-shadow: inset 0 0 0 1px var(--ac-chip-toggle-hover-border, var(--a-border-strong));
-  background-color: var(--ac-chip-toggle-hover-bg, var(--a-surface-neutral-subtle-hover));
+  box-shadow: inset 0 0 0 1px var(--ac-chip-toggle-hover-border, var(--a-border-subtle-hover));
+  background-color: var(--ac-chip-toggle-hover-bg, var(--a-surface-action-subtle-hover));
 }
 .navds-chips__toggle[aria-pressed="true"] {
   box-shadow: none;
@@ -1798,6 +1821,24 @@ body,
 .navds-chips__toggle[aria-pressed="true"]:hover {
   background-color: var(--ac-chip-toggle-pressed-hover-bg, var(--a-surface-action-selected-hover));
 }
+/* Toggle variant neutral */
+.navds-chips__toggle--neutral {
+  box-shadow: inset 0 0 0 1px var(--ac-chip-toggle-neutral-border, var(--a-border-subtle));
+  background-color: var(--ac-chip-toggle-neutral-bg, var(--a-surface-neutral-subtle));
+  color: var(--ac-chip-toggle-neutral-text, var(--a-text-default));
+}
+.navds-chips__toggle--neutral:hover {
+  box-shadow: inset 0 0 0 1px var(--ac-chip-toggle-neutral-hover-border, var(--a-border-subtle-hover));
+  background-color: var(--ac-chip-toggle-neutral-hover-bg, var(--a-surface-neutral-subtle-hover));
+}
+.navds-chips__toggle--neutral[aria-pressed="true"] {
+  box-shadow: none;
+  background-color: var(--ac-chip-toggle-neutral-pressed-bg, var(--a-surface-neutral-selected));
+  color: var(--ac-chip-toggle-neutral-pressed-text, var(--a-text-on-neutral));
+}
+.navds-chips__toggle--neutral[aria-pressed="true"]:hover {
+  background-color: var(--ac-chip-toggle-neutral-pressed-hover-bg, var(--a-surface-neutral-selected));
+}
 .navds-chips__toggle:focus-visible {
   box-shadow: 0 0 0 2px var(--ac-chip-toggle-focus, var(--a-border-focus));
 }
@@ -1836,17 +1877,6 @@ body,
   place-items: center;
   border-radius: var(--a-border-radius-full);
 }
-.navds-chips__toggle-icon {
-  width: 1.5rem;
-  height: 1.5rem;
-  display: grid;
-  place-items: center;
-  border-radius: var(--a-border-radius-full);
-}
-.navds-chips--small .navds-chips__toggle-icon {
-  width: 1.25rem;
-  height: 1.25rem;
-}
 .navds-chips--small .navds-chips__removable-icon {
   width: 1.25rem;
   height: 1.25rem;
@@ -1887,9 +1917,6 @@ body,
 .navds-chips--small .navds-chips--icon-right {
   padding-right: var(--a-spacing-05);
 }
-.navds-chips--small .navds-chips--icon-left {
-  padding-left: 0.375rem;
-}
 [data-theme="dark"] .navds-copybutton,
 [data-theme="dark"].navds-copybutton {
   --a-text-action: var(--a-blue-300);
@@ -2323,6 +2350,9 @@ body,
 .navds-fieldset > :not(:first-child):not(:empty) {
   margin-top: var(--a-spacing-2);
 }
+.navds-fieldset__description {
+  color: var(--ac-form-description, var(--a-text-subtle));
+}
 .navds-fieldset > .navds-fieldset__description:not(:empty) {
   margin-top: 0.125rem;
 }
@@ -2344,6 +2374,7 @@ body,
 }
 .navds-form-field__description {
   margin-top: -6px;
+  color: var(--ac-form-description, var(--a-text-subtle));
 }
 .navds-form-field .navds-error-message,
 .navds-fieldset .navds-error-message {
@@ -4552,6 +4583,52 @@ button.navds-internalheader__title:active,
 .navds-read-more--open > .navds-read-more__button:hover > .navds-read-more__expand-icon {
   transform: translateY(-1px) rotate(-180deg);
 }
+.navds-skeleton {
+  display: block;
+  background-color: var(--ac-skeleton-bg, var(--a-surface-neutral-moderate));
+  height: 1.3em;
+  animation: akselSkeletonAnimation 0.8s linear infinite alternate;
+  pointer-events: none;
+}
+.navds-skeleton--has-children {
+  color: transparent;
+}
+.navds-skeleton--has-children > * {
+  visibility: hidden;
+}
+.navds-skeleton--has-children.navds-skeleton--no-height {
+  height: auto;
+}
+.navds-skeleton--has-children.navds-skeleton--no-width {
+  width: fit-content;
+}
+.navds-skeleton--text {
+  height: auto;
+  transform-origin: 0 55%;
+  transform: scale(1, 0.6);
+  border-radius: var(--a-border-radius-medium);
+}
+.navds-skeleton--text:empty::before {
+  content: "\00a0";
+}
+.navds-skeleton--circle {
+  border-radius: var(--a-border-radius-full);
+}
+.navds-skeleton--rectangle {
+  border-radius: 0;
+}
+.navds-skeleton--rounded {
+  border-radius: var(--a-border-radius-xlarge);
+}
+@keyframes akselSkeletonAnimation {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0.4;
+  }
+}
 .navds-stepper {
   --navds-stepper-circle-size: 1.75rem;
   --navds-stepper-border-width: 2px;

package/dist/tokens.json

@@ -86,14 +86,22 @@
     "--ac-chat-top-text": "--a-text-default"
   },
   "chips": {
-    "--ac-chip-toggle-border": "--a-border-default",
-    "--ac-chip-toggle-bg": "--a-surface-neutral-subtle",
+    "--ac-chip-toggle-border": "--a-border-subtle",
+    "--ac-chip-toggle-bg": "--a-surface-action-subtle",
     "--ac-chip-toggle-text": "--a-text-default",
-    "--ac-chip-toggle-hover-border": "--a-border-strong",
-    "--ac-chip-toggle-hover-bg": "--a-surface-neutral-subtle-hover",
+    "--ac-chip-toggle-hover-border": "--a-border-subtle-hover",
+    "--ac-chip-toggle-hover-bg": "--a-surface-action-subtle-hover",
     "--ac-chip-toggle-pressed-bg": "--a-surface-action-selected",
     "--ac-chip-toggle-pressed-text": "--a-text-on-action",
     "--ac-chip-toggle-pressed-hover-bg": "--a-surface-action-selected-hover",
+    "--ac-chip-toggle-neutral-border": "--a-border-subtle",
+    "--ac-chip-toggle-neutral-bg": "--a-surface-neutral-subtle",
+    "--ac-chip-toggle-neutral-text": "--a-text-default",
+    "--ac-chip-toggle-neutral-hover-border": "--a-border-subtle-hover",
+    "--ac-chip-toggle-neutral-hover-bg": "--a-surface-neutral-subtle-hover",
+    "--ac-chip-toggle-neutral-pressed-bg": "--a-surface-neutral-selected",
+    "--ac-chip-toggle-neutral-pressed-text": "--a-text-on-neutral",
+    "--ac-chip-toggle-neutral-pressed-hover-bg": "--a-surface-neutral-selected",
     "--ac-chip-toggle-focus": "--a-border-focus",
     "--ac-chip-removable-action-bg": "--a-surface-action-selected",
     "--ac-chip-removable-action-text": "--a-text-on-action",
@@ -206,6 +214,9 @@
     "--ac-read-more-active-bg": "--a-surface-active",
     "--ac-read-more-line": "--a-border-divider"
   },
+  "skeleton": {
+    "--ac-skeleton-bg": "--a-surface-neutral-moderate"
+  },
   "stepper": {
     "--ac-stepper-text": "--a-surface-action",
     "--ac-stepper-line": "--a-border-default",
@@ -349,6 +360,10 @@
     "--ac-radio-checkbox-error-border": "--a-border-danger",
     "--ac-radio-checkbox-error-hover-bg": "--a-surface-danger-subtle"
   },
+  "forms": {
+    "--ac-form-description": "--a-text-subtle",
+    "--ac-form-subdescription": "--a-text-subtle"
+  },
   "search": {
     "--ac-search-button-border": "--a-border-default",
     "--ac-search-button-border-hover": "--a-border-action",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/aksel-stylelint",
-  "version": "4.0.0",
+  "version": "4.1.1",
   "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.0.0",
-    "@navikt/ds-tokens": "^4.0.0",
+    "@navikt/ds-css": "^4.1.1",
+    "@navikt/ds-tokens": "^4.1.1",
     "@types/jest": "^29.0.0",
     "concurrently": "7.2.1",
     "copyfiles": "2.4.1",