@navikt/ds-css 5.4.1 → 5.6.0

package/form/select.css

@@ -15,6 +15,7 @@
 
 .navds-select__input:hover {
   border-color: var(--ac-select-hover-bg, var(--a-border-action));
+  cursor: pointer;
 }
 
 .navds-select__input:focus-visible {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-css",
-  "version": "5.4.1",
+  "version": "5.6.0",
   "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": "^5.4.1",
+    "@navikt/ds-tokens": "^5.6.0",
     "cssnano": "6.0.0",
     "fast-glob": "3.2.11",
     "lodash": "4.17.21",

package/primitives/bleed.css

@@ -0,0 +1,87 @@
+.navds-bleed {
+  --__ac-bleed-margin-inline-xs: initial;
+  --__ac-bleed-margin-inline-sm: var(--__ac-bleed-margin-inline-xs);
+  --__ac-bleed-margin-inline-md: var(--__ac-bleed-margin-inline-sm);
+  --__ac-bleed-margin-inline-lg: var(--__ac-bleed-margin-inline-md);
+  --__ac-bleed-margin-inline-xl: var(--__ac-bleed-margin-inline-lg);
+  --__ac-bleed-margin-block-xs: initial;
+  --__ac-bleed-margin-block-sm: var(--__ac-bleed-margin-block-xs);
+  --__ac-bleed-margin-block-md: var(--__ac-bleed-margin-block-sm);
+  --__ac-bleed-margin-block-lg: var(--__ac-bleed-margin-block-md);
+  --__ac-bleed-margin-block-xl: var(--__ac-bleed-margin-block-lg);
+
+  /** defaults */
+  --__ac-bleed-margin-inline: var(--__ac-bleed-margin-inline-xs);
+  --__ac-bleed-margin-block: var(--__ac-bleed-margin-block-xs);
+
+  margin-inline: var(--__ac-bleed-margin-inline);
+  margin-block: var(--__ac-bleed-margin-block);
+}
+
+.navds-bleed--padding {
+  --__ac-bleed-padding-inline-xs: initial;
+  --__ac-bleed-padding-inline-sm: var(--__ac-bleed-padding-inline-xs);
+  --__ac-bleed-padding-inline-md: var(--__ac-bleed-padding-inline-sm);
+  --__ac-bleed-padding-inline-lg: var(--__ac-bleed-padding-inline-md);
+  --__ac-bleed-padding-inline-xl: var(--__ac-bleed-padding-inline-lg);
+  --__ac-bleed-padding-block-xs: initial;
+  --__ac-bleed-padding-block-sm: var(--__ac-bleed-padding-block-xs);
+  --__ac-bleed-padding-block-md: var(--__ac-bleed-padding-block-sm);
+  --__ac-bleed-padding-block-lg: var(--__ac-bleed-padding-block-md);
+  --__ac-bleed-padding-block-xl: var(--__ac-bleed-padding-block-lg);
+
+  /** defaults */
+  --__ac-bleed-padding-inline: var(--__ac-bleed-padding-inline-xs);
+  --__ac-bleed-padding-block: var(--__ac-bleed-padding-block-xs);
+
+  padding-inline: var(--__ac-bleed-padding-inline);
+  padding-block: var(--__ac-bleed-padding-block);
+}
+
+@media (min-width: 480px) {
+  .navds-bleed {
+    --__ac-bleed-margin-inline: var(--__ac-bleed-margin-inline-sm);
+    --__ac-bleed-margin-block: var(--__ac-bleed-margin-block-sm);
+  }
+
+  .navds-bleed--padding {
+    --__ac-bleed-padding-inline: var(--__ac-bleed-padding-inline-sm);
+    --__ac-bleed-padding-block: var(--__ac-bleed-padding-block-sm);
+  }
+}
+
+@media (min-width: 768px) {
+  .navds-bleed {
+    --__ac-bleed-margin-inline: var(--__ac-bleed-margin-inline-md);
+    --__ac-bleed-margin-block: var(--__ac-bleed-margin-block-md);
+  }
+
+  .navds-bleed--padding {
+    --__ac-bleed-padding-inline: var(--__ac-bleed-padding-inline-md);
+    --__ac-bleed-padding-block: var(--__ac-bleed-padding-block-md);
+  }
+}
+
+@media (min-width: 1024px) {
+  .navds-bleed {
+    --__ac-bleed-margin-inline: var(--__ac-bleed-margin-inline-lg);
+    --__ac-bleed-margin-block: var(--__ac-bleed-margin-block-lg);
+  }
+
+  .navds-bleed--padding {
+    --__ac-bleed-padding-inline: var(--__ac-bleed-padding-inline-lg);
+    --__ac-bleed-padding-block: var(--__ac-bleed-padding-block-lg);
+  }
+}
+
+@media (min-width: 1280px) {
+  .navds-bleed {
+    --__ac-bleed-margin-inline: var(--__ac-bleed-margin-inline-xl);
+    --__ac-bleed-margin-block: var(--__ac-bleed-margin-block-xl);
+  }
+
+  .navds-bleed--padding {
+    --__ac-bleed-padding-inline: var(--__ac-bleed-padding-inline-xl);
+    --__ac-bleed-padding-block: var(--__ac-bleed-padding-block-xl);
+  }
+}

package/primitives/box.css

@@ -0,0 +1,75 @@
+.navds-box {
+  --__ac-box-padding-xs: initial;
+  --__ac-box-padding-sm: var(--__ac-box-padding-xs);
+  --__ac-box-padding-md: var(--__ac-box-padding-sm);
+  --__ac-box-padding-lg: var(--__ac-box-padding-md);
+  --__ac-box-padding-xl: var(--__ac-box-padding-lg);
+  --__ac-box-padding-inline-xs: initial;
+  --__ac-box-padding-inline-sm: var(--__ac-box-padding-inline-xs);
+  --__ac-box-padding-inline-md: var(--__ac-box-padding-inline-sm);
+  --__ac-box-padding-inline-lg: var(--__ac-box-padding-inline-md);
+  --__ac-box-padding-inline-xl: var(--__ac-box-padding-inline-lg);
+  --__ac-box-padding-block-xs: initial;
+  --__ac-box-padding-block-sm: var(--__ac-box-padding-block-xs);
+  --__ac-box-padding-block-md: var(--__ac-box-padding-block-sm);
+  --__ac-box-padding-block-lg: var(--__ac-box-padding-block-md);
+  --__ac-box-padding-block-xl: var(--__ac-box-padding-block-lg);
+  --__ac-box-padding: var(--__ac-box-padding-xs);
+  --__ac-box-padding-inline: var(--__ac-box-padding-inline-xs);
+  --__ac-box-padding-block: var(--__ac-box-padding-block-xs);
+  --__ac-box-background: initial;
+  --__ac-box-border-color: initial;
+  --__ac-box-shadow: initial;
+  --__ac-box-border-width: initial;
+  --__ac-box-border-radius-xs: initial;
+  --__ac-box-border-radius-sm: var(--__ac-box-border-radius-xs);
+  --__ac-box-border-radius-md: var(--__ac-box-border-radius-sm);
+  --__ac-box-border-radius-lg: var(--__ac-box-border-radius-md);
+  --__ac-box-border-radius-xl: var(--__ac-box-border-radius-lg);
+  --__ac-box-border-radius: var(--__ac-box-border-radius-xs);
+
+  padding-inline: var(--__ac-box-padding-inline, var(--__ac-box-padding));
+  padding-block: var(--__ac-box-padding-block, var(--__ac-box-padding));
+  background-color: var(--__ac-box-background);
+  border-style: solid;
+  border-color: var(--__ac-box-border-color);
+  border-radius: var(--__ac-box-border-radius);
+  box-shadow: var(--__ac-box-shadow);
+  border-width: var(--__ac-box-border-width, 0);
+}
+
+@media (min-width: 480px) {
+  .navds-box {
+    --__ac-box-padding: var(--__ac-box-padding-sm);
+    --__ac-box-padding-inline: var(--__ac-box-padding-inline-sm);
+    --__ac-box-padding-block: var(--__ac-box-padding-block-sm);
+    --__ac-box-border-radius: var(--__ac-box-border-radius-sm);
+  }
+}
+
+@media (min-width: 768px) {
+  .navds-box {
+    --__ac-box-padding: var(--__ac-box-padding-md);
+    --__ac-box-padding-inline: var(--__ac-box-padding-inline-md);
+    --__ac-box-padding-block: var(--__ac-box-padding-block-md);
+    --__ac-box-border-radius: var(--__ac-box-border-radius-md);
+  }
+}
+
+@media (min-width: 1024px) {
+  .navds-box {
+    --__ac-box-padding: var(--__ac-box-padding-lg);
+    --__ac-box-padding-inline: var(--__ac-box-padding-inline-lg);
+    --__ac-box-padding-block: var(--__ac-box-padding-block-lg);
+    --__ac-box-border-radius: var(--__ac-box-border-radius-lg);
+  }
+}
+
+@media (min-width: 1280px) {
+  .navds-box {
+    --__ac-box-padding: var(--__ac-box-padding-xl);
+    --__ac-box-padding-inline: var(--__ac-box-padding-inline-xl);
+    --__ac-box-padding-block: var(--__ac-box-padding-block-xl);
+    --__ac-box-border-radius: var(--__ac-box-border-radius-xl);
+  }
+}

package/primitives/index.css

@@ -1,3 +1,5 @@
+@import "box.css";
+@import "bleed.css";
 @import "hgrid.css";
 @import "stack.css";
 @import "responsive.css";

package/primitives/responsive.css

@@ -1,51 +1,47 @@
-.navds-responsive {
-  display: none;
-}
-
 @media (min-width: 480px) {
-  .navds-responsive__above--sm {
-    display: revert;
+  .navds-responsive__below--sm {
+    display: none !important;
   }
 }
 
 @media (max-width: 479px) {
-  .navds-responsive__below--sm {
-    display: revert;
+  .navds-responsive__above--sm {
+    display: none !important;
   }
 }
 
 @media (min-width: 768px) {
-  .navds-responsive__above--md {
-    display: revert;
+  .navds-responsive__below--md {
+    display: none !important;
   }
 }
 
 @media (max-width: 767px) {
-  .navds-responsive__below--md {
-    display: revert;
+  .navds-responsive__above--md {
+    display: none !important;
   }
 }
 
 @media (min-width: 1024px) {
-  .navds-responsive__above--lg {
-    display: revert;
+  .navds-responsive__below--lg {
+    display: none !important;
   }
 }
 
 @media (max-width: 1023px) {
-  .navds-responsive__below--lg {
-    display: revert;
+  .navds-responsive__above--lg {
+    display: none !important;
   }
 }
 
 @media (min-width: 1280px) {
-  .navds-responsive__above--xl {
-    display: revert;
+  .navds-responsive__below--xl {
+    display: none !important;
   }
 }
 
 @media (max-width: 1279px) {
-  .navds-responsive__below--xl {
-    display: revert;
+  .navds-responsive__above--xl {
+    display: none !important;
   }
 }

package/primitives/stack.css

@@ -1,14 +1,29 @@
 .navds-stack {
-  --__ac-stack-align: initial;
-  --__ac-stack-justify: initial;
-  --__ac-stack-direction: initial;
   --__ac-stack-wrap: initial;
   --__ac-stack-gap-xs: initial;
-  --__ac-stack-gap-sm: initial;
-  --__ac-stack-gap-md: initial;
-  --__ac-stack-gap-lg: initial;
-  --__ac-stack-gap-xl: initial;
+  --__ac-stack-gap-sm: var(--__ac-stack-gap-xs);
+  --__ac-stack-gap-md: var(--__ac-stack-gap-sm);
+  --__ac-stack-gap-lg: var(--__ac-stack-gap-md);
+  --__ac-stack-gap-xl: var(--__ac-stack-gap-lg);
   --__ac-stack-gap: var(--__ac-stack-gap-xs);
+  --__ac-stack-justify-xs: initial;
+  --__ac-stack-justify-sm: var(--__ac-stack-justify-xs);
+  --__ac-stack-justify-md: var(--__ac-stack-justify-sm);
+  --__ac-stack-justify-lg: var(--__ac-stack-justify-md);
+  --__ac-stack-justify-xl: var(--__ac-stack-justify-lg);
+  --__ac-stack-justify: var(--__ac-stack-justify-xs);
+  --__ac-stack-align-xs: initial;
+  --__ac-stack-align-sm: var(--__ac-stack-align-xs);
+  --__ac-stack-align-md: var(--__ac-stack-align-sm);
+  --__ac-stack-align-lg: var(--__ac-stack-align-md);
+  --__ac-stack-align-xl: var(--__ac-stack-align-lg);
+  --__ac-stack-align: var(--__ac-stack-align-xs);
+  --__ac-stack-direction-xs: initial;
+  --__ac-stack-direction-sm: var(--__ac-stack-direction-xs);
+  --__ac-stack-direction-md: var(--__ac-stack-direction-sm);
+  --__ac-stack-direction-lg: var(--__ac-stack-direction-md);
+  --__ac-stack-direction-xl: var(--__ac-stack-direction-lg);
+  --__ac-stack-direction: var(--__ac-stack-direction-xs);
 
   gap: var(--__ac-stack-gap);
   display: flex;
@@ -25,35 +40,41 @@
 
 .navds-stack > .navds-stack__spacer {
   margin-block-start: calc(var(--__ac-stack-gap) * -1);
-}
-
-.navds-hstack > .navds-stack__spacer {
   margin-inline-start: calc(var(--__ac-stack-gap) * -1);
 }
 
 @media (min-width: 480px) {
   .navds-stack {
-    --__ac-stack-gap: var(--__ac-stack-gap-sm, var(--__ac-stack-gap-xs));
+    --__ac-stack-gap: var(--__ac-stack-gap-sm);
+    --__ac-stack-align: var(--__ac-stack-align-sm);
+    --__ac-stack-justify: var(--__ac-stack-justify-sm);
+    --__ac-stack-direction: var(--__ac-stack-direction-sm);
   }
 }
 
 @media (min-width: 768px) {
   .navds-stack {
-    --__ac-stack-gap: var(--__ac-stack-gap-md, var(--__ac-stack-gap-sm, var(--__ac-stack-gap-xs)));
+    --__ac-stack-gap: var(--__ac-stack-gap-md);
+    --__ac-stack-align: var(--__ac-stack-align-md);
+    --__ac-stack-justify: var(--__ac-stack-justify-md);
+    --__ac-stack-direction: var(--__ac-stack-direction-md);
   }
 }
 
 @media (min-width: 1024px) {
   .navds-stack {
-    --__ac-stack-gap: var(--__ac-stack-gap-lg, var(--__ac-stack-gap-md, var(--__ac-stack-gap-sm, var(--__ac-stack-gap-xs))));
+    --__ac-stack-gap: var(--__ac-stack-gap-lg);
+    --__ac-stack-align: var(--__ac-stack-align-lg);
+    --__ac-stack-justify: var(--__ac-stack-justify-lg);
+    --__ac-stack-direction: var(--__ac-stack-direction-lg);
   }
 }
 
 @media (min-width: 1280px) {
   .navds-stack {
-    --__ac-stack-gap: var(
-      --__ac-stack-gap-xl,
-      var(--__ac-stack-gap-lg, var(--__ac-stack-gap-md, var(--__ac-stack-gap-sm, var(--__ac-stack-gap-xs))))
-    );
+    --__ac-stack-gap: var(--__ac-stack-gap-xl);
+    --__ac-stack-align: var(--__ac-stack-align-xl);
+    --__ac-stack-justify: var(--__ac-stack-justify-xl);
+    --__ac-stack-direction: var(--__ac-stack-direction-xl);
   }
 }

package/skeleton.css

@@ -5,6 +5,10 @@
   pointer-events: none;
 }
 
+.navds-skeleton--inline {
+  display: inline-block;
+}
+
 .navds-skeleton--has-children {
   color: transparent;
 }

package/timeline.css

@@ -337,17 +337,14 @@
   box-shadow: var(--a-shadow-medium);
   border: 1px solid;
   border-color: var(--ac-popover-border, var(--a-border-default));
-  border-radius: var(--a-border-radius-medium);
+  border-radius: var(--a-border-radius-large);
+  padding: var(--a-spacing-3);
 }
 
 .navds-timeline__popover:focus {
   outline: none;
 }
 
-.navds-timeline__popover-content {
-  padding: var(--a-spacing-3);
-}
-
 .navds-timeline__popover-arrow {
   position: absolute;
   z-index: -1;