@navikt/ds-css 4.0.0 → 4.1.1

package/form/fieldset.css

@@ -1,3 +1,7 @@
+[data-theme="dark"] {
+  --ac-form-description: var(--a-text-on-inverted);
+}
+
 .navds-fieldset {
   margin: 0;
   padding: 0;
@@ -9,6 +13,10 @@
   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;
 }

package/form/form.css

@@ -1,3 +1,7 @@
+[data-theme="dark"] {
+  --ac-form-description: var(--a-text-on-inverted);
+}
+
 .navds-form-field {
   display: grid;
   justify-items: start;
@@ -6,6 +10,7 @@
 
 .navds-form-field__description {
   margin-top: -6px;
+  color: var(--ac-form-description, var(--a-text-subtle));
 }
 
 .navds-form-field .navds-error-message,

package/index.css

@@ -28,6 +28,7 @@
 @import "panel.css";
 @import "link-panel.css";
 @import "read-more.css";
+@import "skeleton.css";
 @import "stepper.css";
 @import "table.css";
 @import "tabs.css";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-css",
-  "version": "4.0.0",
+  "version": "4.1.1",
   "description": "CSS for NAV Designsystem",
   "author": "Aksel | NAV designsystem team",
   "keywords": [
@@ -27,7 +27,7 @@
     "css:get-version": "node config/get-version.js"
   },
   "devDependencies": {
-    "@navikt/ds-tokens": "^4.0.0",
+    "@navikt/ds-tokens": "^4.1.1",
     "cssnano": "6.0.0",
     "fast-glob": "3.2.11",
     "lodash": "4.17.21",

package/skeleton.css

@@ -0,0 +1,56 @@
+.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;
+  }
+}

package/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",