@navikt/ds-css 5.4.0 → 5.5.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @navikt/ds-css
 
+## 5.5.0
+
+### Minor Changes
+
+- Box: Ny primitive, erstatter dagens `Panel` ([#2195](https://github.com/navikt/aksel/pull/2195))
+
+### Patch Changes
+
+- Skeleton: Width fungerer nå med inline-variant av Skeleton ([#2273](https://github.com/navikt/aksel/pull/2273))
+
+## 5.4.1
+
 ## 5.4.0
 
 ### Minor Changes

package/baseline/_utilities.css

@@ -28,6 +28,7 @@
 .navds-sr-only {
   border: 0;
   clip: rect(0, 0, 0, 0);
+  clip-path: inset(50%);
   height: 1px;
   margin: -1px;
   overflow: hidden;
@@ -50,6 +51,7 @@
 .navds-sr-only.focusable:active,
 .navds-sr-only.focusable:focus {
   clip: auto;
+  clip-path: none;
   height: auto;
   margin: 0;
   overflow: visible;

package/config/_mappings.js

@@ -31,6 +31,34 @@ const StyleMappings = {
     },
   ],
   components: [
+    {
+      component: "Box",
+      main: primitivesCss,
+    },
+    {
+      component: "HGrid",
+      main: primitivesCss,
+    },
+    {
+      component: "HStack",
+      main: primitivesCss,
+    },
+    {
+      component: "VStack",
+      main: primitivesCss,
+    },
+    {
+      component: "Spacer",
+      main: primitivesCss,
+    },
+    {
+      component: "Show",
+      main: primitivesCss,
+    },
+    {
+      component: "Hide",
+      main: primitivesCss,
+    },
     {
       component: "Accordion",
       main: "accordion.css",
@@ -100,10 +128,6 @@ const StyleMappings = {
       main: "help-text.css",
       dependencies: ["popover.css"],
     },
-    {
-      component: "HGrid",
-      main: primitivesCss,
-    },
     { component: "Ingress", main: typoCss },
     {
       component: "InternalHeader",
@@ -139,26 +163,6 @@ const StyleMappings = {
     { component: "Select", main: formCss, dependencies: [typoCss] },
     { component: "Skeleton", main: "skeleton.css", dependencies: [] },
     { component: "Stepper", main: "stepper.css", dependencies: [typoCss] },
-    {
-      component: "HStack",
-      main: primitivesCss,
-    },
-    {
-      component: "VStack",
-      main: primitivesCss,
-    },
-    {
-      component: "Spacer",
-      main: primitivesCss,
-    },
-    {
-      component: "Show",
-      main: primitivesCss,
-    },
-    {
-      component: "Hide",
-      main: primitivesCss,
-    },
     { component: "Switch", main: formCss, dependencies: [typoCss] },
     { component: "Table", main: "table.css", dependencies: [typoCss] },
     { component: "Tabs", main: "tabs.css", dependencies: [typoCss] },

package/dist/component/index.css

@@ -1,7 +1,7 @@
 @charset "UTF-8";
 /**
  * Do not edit directly
- * Generated on Thu, 07 Sep 2023 12:27:29 GMT
+ * Generated on Wed, 13 Sep 2023 13:01:01 GMT
  */
 :root, :host {
   --a-spacing-05: 0.125rem;
@@ -172,25 +172,41 @@
   --a-breakpoint-sm-down: 479px;
   --a-breakpoint-sm: 480px;
   --a-breakpoint-xs: 0;
-  --a-icon-on-info: var(--a-gray-900);
-  --a-icon-on-warning: var(--a-gray-900);
-  --a-icon-on-danger: var(--a-white);
-  --a-icon-on-success: var(--a-white);
-  --a-icon-on-action: var(--a-white);
-  --a-icon-on-inverted: var(--a-white);
-  --a-icon-on-neutral: var(--a-white);
-  --a-icon-alt-3: var(--a-deepblue-500);
-  --a-icon-alt-2: var(--a-limegreen-700);
-  --a-icon-alt-1: var(--a-purple-500);
-  --a-icon-info: var(--a-lightblue-800);
-  --a-icon-warning: var(--a-orange-600);
-  --a-icon-danger: var(--a-red-500);
-  --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-blue-700);
-  --a-icon-subtle: var(--a-grayalpha-700);
-  --a-icon-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-text-on-alt-3: var(--a-white);
+  --a-text-on-alt-2: var(--a-gray-900);
+  --a-text-on-alt-1: var(--a-white);
+  --a-text-on-info: var(--a-gray-900);
+  --a-text-on-warning: var(--a-gray-900);
+  --a-text-on-danger: var(--a-white);
+  --a-text-on-success: var(--a-white);
+  --a-text-on-action: var(--a-white);
+  --a-text-on-neutral: var(--a-white);
+  --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-blue-700);
+  --a-text-danger: var(--a-red-500);
+  --a-text-visited: var(--a-purple-500);
+  --a-text-subtle: var(--a-grayalpha-700);
+  --a-text-default: var(--a-gray-900);
   --a-surface-alt-3: var(--a-deepblue-500);
   --a-surface-alt-3-strong: var(--a-deepblue-800);
   --a-surface-alt-3-moderate: var(--a-deepblue-200);
@@ -204,83 +220,65 @@
   --a-surface-info: var(--a-lightblue-500);
   --a-surface-info-moderate: var(--a-lightblue-200);
   --a-surface-info-subtle: var(--a-lightblue-100);
-  --a-surface-info-subtle-hover: var(--a-lightblue-200);
   --a-surface-warning: var(--a-orange-500);
   --a-surface-warning-moderate: var(--a-orange-200);
   --a-surface-warning-subtle: var(--a-orange-100);
-  --a-surface-warning-subtle-hover: var(--a-orange-200);
   --a-surface-danger: var(--a-red-500);
-  --a-surface-danger-active: var(--a-red-700);
-  --a-surface-danger-hover: var(--a-red-600);
   --a-surface-danger-moderate: var(--a-red-200);
   --a-surface-danger-subtle: var(--a-red-100);
-  --a-surface-danger-subtle-hover: var(--a-red-200);
-  --a-surface-success-hover: var(--a-green-600);
   --a-surface-success: var(--a-green-500);
   --a-surface-success-moderate: var(--a-green-200);
   --a-surface-success-subtle: var(--a-green-100);
-  --a-surface-success-subtle-hover: var(--a-green-200);
   --a-surface-neutral: var(--a-gray-700);
-  --a-surface-neutral-active: var(--a-gray-900);
   --a-surface-neutral-selected: var(--a-gray-900);
-  --a-surface-neutral-hover: var(--a-gray-800);
   --a-surface-neutral-moderate: var(--a-grayalpha-200);
   --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-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-500);
   --a-surface-transparent: var(--a-transparent);
   --a-surface-subtle: var(--a-gray-50);
   --a-surface-selected: var(--a-blue-50);
+  --a-surface-default: var(--a-white);
+  --a-surface-info-subtle-hover: var(--a-lightblue-200);
+  --a-surface-warning-subtle-hover: var(--a-orange-200);
+  --a-surface-danger-active: var(--a-red-700);
+  --a-surface-danger-hover: var(--a-red-600);
+  --a-surface-danger-subtle-hover: var(--a-red-200);
+  --a-surface-success-hover: var(--a-green-600);
+  --a-surface-success-subtle-hover: var(--a-green-200);
+  --a-surface-neutral-hover: var(--a-gray-800);
+  --a-surface-neutral-active: var(--a-gray-900);
+  --a-surface-neutral-subtle-hover: var(--a-grayalpha-200);
+  --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-hover: var(--a-blue-100);
+  --a-surface-inverted-active: var(--a-gray-700);
+  --a-surface-inverted-hover: var(--a-gray-800);
   --a-surface-active: var(--a-grayalpha-200);
   --a-surface-hover: var(--a-grayalpha-100);
-  --a-surface-default: var(--a-white);
-  --a-bg-subtle: var(--a-gray-100);
-  --a-bg-default: var(--a-white);
-  --a-text-on-alt-3: var(--a-white);
-  --a-text-on-alt-2: var(--a-gray-900);
-  --a-text-on-alt-1: var(--a-white);
-  --a-text-on-info: var(--a-gray-900);
-  --a-text-on-warning: var(--a-gray-900);
-  --a-text-on-danger: var(--a-white);
-  --a-text-on-success: var(--a-white);
-  --a-text-on-action: var(--a-white);
-  --a-text-on-neutral: var(--a-white);
-  --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-blue-700);
-  --a-text-danger: var(--a-red-500);
-  --a-text-visited: var(--a-purple-500);
-  --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-icon-on-info: var(--a-gray-900);
+  --a-icon-on-warning: var(--a-gray-900);
+  --a-icon-on-danger: var(--a-white);
+  --a-icon-on-success: var(--a-white);
+  --a-icon-on-action: var(--a-white);
+  --a-icon-on-inverted: var(--a-white);
+  --a-icon-on-neutral: var(--a-white);
+  --a-icon-alt-3: var(--a-deepblue-500);
+  --a-icon-alt-2: var(--a-limegreen-700);
+  --a-icon-alt-1: var(--a-purple-500);
+  --a-icon-info: var(--a-lightblue-800);
+  --a-icon-warning: var(--a-orange-600);
+  --a-icon-danger: var(--a-red-500);
+  --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-blue-700);
+  --a-icon-subtle: var(--a-grayalpha-700);
+  --a-icon-default: var(--a-gray-900);
   --a-border-alt-3: var(--a-deepblue-500);
   --a-border-alt-2: var(--a-limegreen-700);
   --a-border-alt-1: var(--a-purple-400);
@@ -296,12 +294,14 @@
   --a-border-action: var(--a-blue-500);
   --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);
-  --a-shadow-focus: 0 0 0 3px var(--a-border-focus);
+  --a-border-subtle-hover: var(--a-grayalpha-400);
+  --a-bg-subtle: var(--a-gray-100);
+  --a-bg-default: var(--a-white);
   --a-shadow-focus-inverted: 0 0 0 3px var(--a-border-focus-on-inverted);
+  --a-shadow-focus: 0 0 0 3px var(--a-border-focus);
   --navds-content-container-max-width: 79.5rem;
 }
 /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
@@ -708,6 +708,7 @@ button,
 .navds-sr-only {
   border: 0;
   clip: rect(0, 0, 0, 0);
+  clip-path: inset(50%);
   height: 1px;
   margin: -1px;
   overflow: hidden;
@@ -728,6 +729,7 @@ button,
 .navds-sr-only.focusable:active,
 .navds-sr-only.focusable:focus {
   clip: auto;
+  clip-path: none;
   height: auto;
   margin: 0;
   overflow: visible;
@@ -1043,6 +1045,119 @@ body,
 .navds-typo--color-subtle {
   color: var(--__ac-typo-text-subtle, var(--a-text-subtle));
 }
+.navds-box {
+  --__ac-box-padding-xs: initial;
+  --__ac-box-padding-sm: initial;
+  --__ac-box-padding-md: initial;
+  --__ac-box-padding-lg: initial;
+  --__ac-box-padding-xl: initial;
+  --__ac-box-padding-block-xs: initial;
+  --__ac-box-padding-inline-xs: initial;
+  --__ac-box-padding-block-sm: initial;
+  --__ac-box-padding-inline-sm: initial;
+  --__ac-box-padding-block-md: initial;
+  --__ac-box-padding-inline-md: initial;
+  --__ac-box-padding-block-lg: initial;
+  --__ac-box-padding-inline-lg: initial;
+  --__ac-box-padding-block-xl: initial;
+  --__ac-box-padding-inline-xl: initial;
+  --__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: initial;
+  --__ac-box-border-radius-md: initial;
+  --__ac-box-border-radius-lg: initial;
+  --__ac-box-border-radius-xl: initial;
+  --__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, var(--__ac-box-padding-xs));
+    --__ac-box-padding-inline: var(--__ac-box-padding-inline-sm, var(--__ac-box-padding-inline-xs));
+    --__ac-box-padding-block: var(--__ac-box-padding-block-sm, var(--__ac-box-padding-block-xs));
+    --__ac-box-border-radius: var(--__ac-box-border-radius-sm, var(--__ac-box-border-radius-xs));
+  }
+}
+@media (min-width: 768px) {
+  .navds-box {
+    --__ac-box-padding: var(--__ac-box-padding-md, var(--__ac-box-padding-sm, var(--__ac-box-padding-xs)));
+    --__ac-box-padding-inline: var(
+      --__ac-box-padding-inline-md,
+      var(--__ac-box-padding-inline-sm, var(--__ac-box-padding-inline-xs))
+    );
+    --__ac-box-padding-block: var(
+      --__ac-box-padding-block-md,
+      var(--__ac-box-padding-block-sm, var(--__ac-box-padding-block-xs))
+    );
+    --__ac-box-border-radius: var(
+      --__ac-box-border-radius-md,
+      var(--__ac-box-border-radius-sm, var(--__ac-box-border-radius-xs))
+    );
+  }
+}
+@media (min-width: 1024px) {
+  .navds-box {
+    --__ac-box-padding: var(
+      --__ac-box-padding-lg,
+      var(--__ac-box-padding-md, var(--__ac-box-padding-sm, var(--__ac-box-padding-xs)))
+    );
+    --__ac-box-padding-inline: var(
+      --__ac-box-padding-inline-lg,
+      var(--__ac-box-padding-inline-md, var(--__ac-box-padding-inline-sm, var(--__ac-box-padding-inline-xs)))
+    );
+    --__ac-box-padding-block: var(
+      --__ac-box-padding-block-lg,
+      var(--__ac-box-padding-block-md, var(--__ac-box-padding-block-sm, var(--__ac-box-padding-block-xs)))
+    );
+    --__ac-box-border-radius: var(
+      --__ac-box-border-radius-lg,
+      var(--__ac-box-border-radius-md, var(--__ac-box-border-radius-sm, var(--__ac-box-border-radius-xs)))
+    );
+  }
+}
+@media (min-width: 1280px) {
+  .navds-box {
+    --__ac-box-padding: var(
+      --__ac-box-padding-xl,
+      var(--__ac-box-padding-lg, var(--__ac-box-padding-md, var(--__ac-box-padding-sm, var(--__ac-box-padding-xs))))
+    );
+    --__ac-box-padding-inline: var(
+      --__ac-box-padding-inline-xl,
+      var(
+        --__ac-box-padding-inline-lg,
+        var(--__ac-box-padding-inline-md, var(--__ac-box-padding-inline-sm, var(--__ac-box-padding-inline-xs)))
+      )
+    );
+    --__ac-box-padding-block: var(
+      --__ac-box-padding-block-xl,
+      var(
+        --__ac-box-padding-block-lg,
+        var(--__ac-box-padding-block-md, var(--__ac-box-padding-block-sm, var(--__ac-box-padding-block-xs)))
+      )
+    );
+    --__ac-box-border-radius: var(
+      --__ac-box-border-radius-xl,
+      var(
+        --__ac-box-border-radius-lg,
+        var(--__ac-box-border-radius-md, var(--__ac-box-border-radius-sm, var(--__ac-box-border-radius-xs)))
+      )
+    );
+  }
+}
 .navds-hgrid {
   --__ac-hgrid-columns-xs: initial;
   --__ac-hgrid-columns-sm: initial;
@@ -5417,6 +5532,9 @@ button.navds-internalheader__title:active,
   animation: akselSkeletonAnimation 0.8s linear infinite alternate;
   pointer-events: none;
 }
+.navds-skeleton--inline {
+  display: inline-block;
+}
 .navds-skeleton--has-children {
   color: transparent;
 }