@navikt/ds-css 7.33.4 → 7.34.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @navikt/ds-css
 
+## 7.34.0
+
+### Minor Changes
+
+- LocalAlert: :tada: New component replacing regular `<Alert />`. ([#4186](https://github.com/navikt/aksel/pull/4186))
+
+- GlobalAlert: :tada: New component replacing `<Alert fullWidth>`, now with built-in centering of content. ([#4186](https://github.com/navikt/aksel/pull/4186))
+
+- InlineMessage: :tada: New component replacing `<Alert inline />`. ([#4186](https://github.com/navikt/aksel/pull/4186))
+
+- InfoCard: :tada: New component replacing `<Alert variant="info" />`. Used for content you want to highlight. ([#4186](https://github.com/navikt/aksel/pull/4186))
+
+### Patch Changes
+
+- Tooltip: Update z-index to max int. ([#4309](https://github.com/navikt/aksel/pull/4309))
+
+## 7.33.5
+
+### Patch Changes
+
+- Darkside: Remove `display: none` on `[hidden]` since browsers have this built-in ([#4301](https://github.com/navikt/aksel/pull/4301))
+
 ## 7.33.4
 
 ## 7.33.3

package/alert.css

@@ -111,3 +111,258 @@
     color: canvastext;
   }
 }
+
+/* -------------------- InfoCard, LocalAlert, GlobalAlert ------------------- */
+.navds-base-alert {
+  display: grid;
+  border-radius: var(--a-border-radius-xlarge);
+  overflow: clip;
+  height: fit-content;
+
+  --__ac-base-alert-pi: var(--a-spacing-5);
+  --__ac-base-alert-content-p: var(--a-spacing-3) var(--__ac-base-alert-pi) var(--a-spacing-4) var(--__ac-base-alert-pi);
+  --__ac-base-alert-title-pb: var(--a-spacing-05);
+  --__ac-base-alert-header-max-width: 37.5rem;
+
+  &[data-size="small"] {
+    --__ac-base-alert-pi: var(--a-spacing-4);
+    --__ac-base-alert-content-p: var(--a-spacing-2) var(--a-spacing-4) var(--a-spacing-3) var(--a-spacing-4);
+    --__ac-base-alert-title-pb: var(--a-spacing-1);
+  }
+
+  &[data-variant="moderate"] {
+    outline: 1px solid;
+    outline-offset: -1px;
+  }
+
+  &[data-variant="strong"] {
+    outline: 4px solid;
+    outline-offset: -4px;
+  }
+
+  &[data-global="true"] {
+    border-radius: 0;
+  }
+}
+
+.navds-base-alert[data-color="accent"] {
+  outline-color: var(--a-border-action);
+
+  &[data-variant="moderate"] {
+    .navds-base-alert__header {
+      background: var(--a-surface-action-subtle);
+      color: var(--a-blue-800);
+      border-color: var(--a-blue-200);
+    }
+  }
+}
+
+.navds-base-alert[data-color="neutral"] {
+  outline-color: var(--a-gray-700);
+
+  &[data-variant="moderate"] {
+    .navds-base-alert__header {
+      background: var(--a-surface-neutral-subtle);
+      color: var(--a-gray-800);
+      border-color: var(--a-gray-200);
+    }
+  }
+
+  &[data-variant="strong"] {
+    .navds-base-alert__header {
+      background: var(--a-surface-neutral);
+      color: var(--a-text-on-neutral);
+    }
+  }
+}
+
+.navds-base-alert[data-color="info"] {
+  outline-color: var(--a-border-info);
+
+  &[data-variant="moderate"] {
+    .navds-base-alert__header {
+      background: var(--a-surface-info-subtle);
+      color: var(--a-lightblue-900);
+      border-color: var(--a-lightblue-200);
+    }
+  }
+}
+
+.navds-base-alert[data-color="success"] {
+  outline-color: var(--a-border-success);
+
+  &[data-variant="moderate"] {
+    .navds-base-alert__header {
+      background: var(--a-surface-success-subtle);
+      color: var(--a-green-800);
+      border-color: var(--a-green-200);
+    }
+  }
+
+  &[data-variant="strong"] {
+    .navds-base-alert__header {
+      background: var(--a-surface-success);
+      color: var(--a-text-on-success);
+    }
+  }
+}
+
+.navds-base-alert[data-color="warning"] {
+  outline-color: var(--a-surface-warning);
+
+  &[data-variant="moderate"] {
+    .navds-base-alert__header {
+      background: var(--a-surface-warning-subtle);
+      color: var(--a-orange-900);
+      border-color: var(--a-orange-200);
+    }
+  }
+
+  &[data-variant="strong"] {
+    .navds-base-alert__header {
+      background: var(--a-surface-warning);
+      color: var(--a-text-on-warning);
+    }
+  }
+}
+
+.navds-base-alert[data-color="danger"] {
+  outline-color: var(--a-border-danger);
+
+  &[data-variant="moderate"] {
+    .navds-base-alert__header {
+      background: var(--a-surface-danger-subtle);
+      color: var(--a-red-800);
+      border-color: var(--a-red-200);
+    }
+  }
+
+  &[data-variant="strong"] {
+    .navds-base-alert__header {
+      background: var(--a-surface-danger);
+      color: var(--a-text-on-danger);
+    }
+  }
+}
+
+.navds-base-alert[data-color="brand-magenta"] {
+  outline-color: var(--a-border-alt-1);
+
+  &[data-variant="moderate"] {
+    .navds-base-alert__header {
+      background: var(--a-surface-alt-1-subtle);
+      color: var(--a-purple-800);
+      border-color: var(--a-purple-200);
+    }
+  }
+}
+
+.navds-base-alert[data-color="brand-beige"] {
+  outline-color: var(--a-border-warning);
+
+  &[data-variant="moderate"] {
+    .navds-base-alert__header {
+      background: var(--a-surface-warning-subtle);
+      color: var(--a-orange-900);
+      border-color: var(--a-orange-200);
+    }
+  }
+}
+
+.navds-base-alert[data-color="brand-blue"] {
+  outline-color: var(--a-border-alt-3);
+
+  &[data-variant="moderate"] {
+    .navds-base-alert__header {
+      background: var(--a-surface-alt-3-subtle);
+      color: var(--a-deepblue-800);
+      border-color: var(--a-deepblue-200);
+    }
+  }
+}
+
+.navds-base-alert[data-color="meta-lime"] {
+  outline-color: var(--a-border-alt-2);
+
+  &[data-variant="moderate"] {
+    .navds-base-alert__header {
+      background: var(--a-surface-alt-2-subtle);
+      color: var(--a-limegreen-900);
+      border-color: var(--a-limegreen-200);
+    }
+  }
+}
+
+.navds-base-alert[data-color="meta-purple"] {
+  outline-color: var(--a-border-alt-1);
+
+  &[data-variant="moderate"] {
+    .navds-base-alert__header {
+      background: var(--a-surface-alt-1-subtle);
+      color: var(--a-purple-800);
+      border-color: var(--a-purple-200);
+    }
+  }
+}
+
+.navds-base-alert__header {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--a-spacing-2);
+  padding: var(--a-spacing-2) var(--__ac-base-alert-pi);
+  border-bottom: 1px solid;
+
+  .navds-base-alert[data-global="true"] & {
+    padding-inline: max(var(--__ac-base-alert-pi), calc((100% - var(--__ac-base-alert-header-max-width)) / 2));
+  }
+
+  .navds-base-alert[data-variant="strong"] & {
+    border-bottom: none;
+  }
+
+  &:only-child {
+    border-bottom: none;
+  }
+}
+
+.navds-base-alert__icon {
+  font-size: 1.5rem;
+  margin-top: var(--a-spacing-1);
+  display: grid;
+}
+
+.navds-base-alert__title {
+  padding-block: var(--__ac-base-alert-title-pb);
+}
+
+.navds-base-alert__content {
+  padding: var(--__ac-base-alert-content-p);
+  background-color: var(--a-bg-default);
+
+  .navds-base-alert[data-global="true"] & {
+    padding-inline: max(var(--__ac-base-alert-pi), calc((100% - var(--__ac-base-alert-header-max-width)) / 2));
+  }
+}
+
+.navds-base-alert__close-button.navds-base-alert__close-button {
+  margin-left: auto;
+
+  /* Moved focus-outline over wrapper outline */
+  z-index: 1;
+
+  &:focus-visible {
+    box-shadow: 0 0 0 3px white;
+  }
+
+  &.navds-base-alert__close-button.navds-base-alert__close-button {
+    color: var(--a-text-on-inverted);
+  }
+}
+
+.navds-base-alert[data-color="warning"] .navds-base-alert__close-button.navds-base-alert__close-button {
+  color: var(--a-text-default);
+
+  &:active {
+    color: var(--a-text-on-inverted);
+  }
+}

package/config/_mappings.js

@@ -132,6 +132,11 @@ const StyleMappings = {
         primitivesCss,
       ],
     },
+    {
+      component: "GlobalAlert",
+      main: "alert.css",
+      dependencies: [typoCss, "button.css"],
+    },
     {
       component: "GuidePanel",
       main: "guide-panel.css",
@@ -143,7 +148,13 @@ const StyleMappings = {
       main: "help-text.css",
       dependencies: ["popover.css"],
     },
+    { component: "InfoCard", main: "alert.css", dependencies: [typoCss] },
     { component: "Ingress", main: typoCss },
+    {
+      component: "InlineMessage",
+      main: "inline-message.css",
+      dependencies: [typoCss],
+    },
     {
       component: "InternalHeader",
       main: "internalheader.css",
@@ -163,6 +174,11 @@ const StyleMappings = {
     },
     { component: "List", main: "list.css", dependencies: [typoCss] },
     { component: "Loader", main: "loader.css" },
+    {
+      component: "LocalAlert",
+      main: "alert.css",
+      dependencies: [typoCss, "button.css"],
+    },
     {
       component: "Modal",
       main: "modal.css",

package/darkside/alert.darkside.css

@@ -82,3 +82,102 @@
     }
   }
 }
+
+/* -------------------- InfoCard, LocalAlert, GlobalAlert ------------------- */
+.aksel-base-alert {
+  display: grid;
+  border-radius: var(--ax-radius-12);
+  overflow: clip;
+  height: fit-content;
+
+  --__axc-base-alert-pi: var(--ax-space-20);
+  --__axc-base-alert-content-p: var(--ax-space-12) var(--__axc-base-alert-pi) var(--ax-space-16) var(--__axc-base-alert-pi);
+  --__axc-base-alert-title-pb: var(--ax-space-2);
+  --__axc-base-alert-header-max-width: 37.5rem;
+
+  &[data-size="small"] {
+    --__axc-base-alert-pi: var(--ax-space-16);
+    --__axc-base-alert-content-p: var(--ax-space-8) var(--ax-space-16) var(--ax-space-12) var(--ax-space-16);
+    --__axc-base-alert-title-pb: var(--ax-space-4);
+  }
+
+  &[data-variant="moderate"] {
+    outline: 1px solid var(--ax-border-default);
+    outline-offset: -1px;
+  }
+
+  &[data-variant="strong"] {
+    outline: 4px solid var(--ax-border-default);
+    outline-offset: -4px;
+
+    &[data-color="neutral"] {
+      outline-color: var(--ax-border-strong);
+    }
+  }
+
+  &[data-global="true"] {
+    border-radius: 0;
+  }
+}
+
+.aksel-base-alert__header {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--ax-space-8);
+  padding: var(--ax-space-8) var(--__axc-base-alert-pi);
+  border-bottom: 1px solid;
+
+  .aksel-base-alert[data-global="true"] & {
+    padding-inline: max(var(--__axc-base-alert-pi), calc((100% - var(--__axc-base-alert-header-max-width)) / 2));
+  }
+
+  .aksel-base-alert[data-variant="moderate"] & {
+    background: var(--ax-bg-moderate);
+    color: var(--ax-text-default);
+    border-color: var(--ax-border-subtleA);
+  }
+
+  .aksel-base-alert[data-variant="strong"] & {
+    background: var(--ax-bg-strong);
+    color: var(--ax-text-contrast);
+    border-bottom: none;
+  }
+
+  &:only-child {
+    border-bottom: none;
+  }
+}
+
+.aksel-base-alert__icon {
+  font-size: 1.5rem;
+  margin-top: var(--ax-space-4);
+  display: grid;
+}
+
+.aksel-base-alert__title {
+  padding-block: var(--__axc-base-alert-title-pb);
+}
+
+.aksel-base-alert__content {
+  padding: var(--__axc-base-alert-content-p);
+  background-color: var(--ax-bg-default);
+
+  .aksel-base-alert[data-global="true"] & {
+    padding-inline: max(var(--__axc-base-alert-pi), calc((100% - var(--__axc-base-alert-header-max-width)) / 2));
+  }
+}
+
+.aksel-base-alert__close-button {
+  margin-left: auto;
+
+  /* Moved focus-outline over wrapper outline */
+  z-index: 1;
+
+  &:focus-visible {
+    outline-color: var(--ax-bg-default);
+  }
+
+  &.aksel-base-alert__close-button.aksel-base-alert__close-button {
+    color: var(--ax-text-neutral-contrast);
+  }
+}

package/darkside/baseline/baseline.darkside.css

@@ -7,10 +7,6 @@ body,
 }
 
 /* ---------------------------- Inline utilities ---------------------------- */
-[hidden] {
-  /* CSS-layers reverses "!important" ordering, so we can't set this to important if we want to override it later. */
-  display: none;
-}
 
 /* https://web.dev/prefers-reduced-motion/ */
 @media (prefers-reduced-motion: reduce) {

package/darkside/index.css

@@ -35,6 +35,7 @@
 @import "./expansioncard.darkside.css" layer(aksel.components);
 @import "./guide-panel.darkside.css" layer(aksel.components);
 @import "./help-text.darkside.css" layer(aksel.components);
+@import "./inline-message.darkside.css" layer(aksel.components);
 @import "./internalheader.darkside.css" layer(aksel.components);
 @import "./link.darkside.css" layer(aksel.components);
 @import "./link-panel.darkside.css" layer(aksel.components);

package/darkside/inline-message.darkside.css

@@ -0,0 +1,15 @@
+.aksel-inline-message {
+  display: flex;
+  gap: var(--ax-space-4);
+  color: var(--ax-text-default);
+}
+
+.aksel-inline-message__icon {
+  color: var(--ax-text-subtle);
+  font-size: 1.5rem;
+  flex: 0 0 auto;
+
+  .aksel-inline-message[data-size="small"] & {
+    font-size: 1.25rem;
+  }
+}

package/darkside/stepper.darkside.css

@@ -29,7 +29,7 @@
   justify-self: center;
   grid-column: 1;
 
-  .aksel-stepper__item--non-interactive & {
+  .aksel-stepper__item[data-interactive="false"] & {
     background-color: var(--ax-border-neutral-strong);
   }
 }

package/darkside/tooltip.darkside.css

@@ -1,5 +1,5 @@
 .aksel-tooltip {
-  z-index: 3000;
+  z-index: 2147483647;
   background-color: var(--ax-bg-neutral-strong);
   color: var(--ax-text-neutral-contrast);
   border-radius: var(--ax-radius-4);

package/dist/component/alert.css

@@ -111,3 +111,229 @@
     color: canvastext;
   }
 }
+
+/* -------------------- InfoCard, LocalAlert, GlobalAlert ------------------- */
+
+.navds-base-alert {
+  display: grid;
+  border-radius: var(--a-border-radius-xlarge);
+  overflow: clip;
+  height: fit-content;
+
+  --__ac-base-alert-pi: var(--a-spacing-5);
+  --__ac-base-alert-content-p: var(--a-spacing-3) var(--__ac-base-alert-pi) var(--a-spacing-4) var(--__ac-base-alert-pi);
+  --__ac-base-alert-title-pb: var(--a-spacing-05);
+  --__ac-base-alert-header-max-width: 37.5rem;
+}
+
+.navds-base-alert[data-size="small"] {
+    --__ac-base-alert-pi: var(--a-spacing-4);
+    --__ac-base-alert-content-p: var(--a-spacing-2) var(--a-spacing-4) var(--a-spacing-3) var(--a-spacing-4);
+    --__ac-base-alert-title-pb: var(--a-spacing-1);
+  }
+
+.navds-base-alert[data-variant="moderate"] {
+    outline: 1px solid;
+    outline-offset: -1px;
+  }
+
+.navds-base-alert[data-variant="strong"] {
+    outline: 4px solid;
+    outline-offset: -4px;
+  }
+
+.navds-base-alert[data-global="true"] {
+    border-radius: 0;
+  }
+
+.navds-base-alert[data-color="accent"] {
+  outline-color: var(--a-border-action);
+}
+
+.navds-base-alert[data-color="accent"][data-variant="moderate"] .navds-base-alert__header {
+      background: var(--a-surface-action-subtle);
+      color: var(--a-blue-800);
+      border-color: var(--a-blue-200);
+    }
+
+.navds-base-alert[data-color="neutral"] {
+  outline-color: var(--a-gray-700);
+}
+
+.navds-base-alert[data-color="neutral"][data-variant="moderate"] .navds-base-alert__header {
+      background: var(--a-surface-neutral-subtle);
+      color: var(--a-gray-800);
+      border-color: var(--a-gray-200);
+    }
+
+.navds-base-alert[data-color="neutral"][data-variant="strong"] .navds-base-alert__header {
+      background: var(--a-surface-neutral);
+      color: var(--a-text-on-neutral);
+    }
+
+.navds-base-alert[data-color="info"] {
+  outline-color: var(--a-border-info);
+}
+
+.navds-base-alert[data-color="info"][data-variant="moderate"] .navds-base-alert__header {
+      background: var(--a-surface-info-subtle);
+      color: var(--a-lightblue-900);
+      border-color: var(--a-lightblue-200);
+    }
+
+.navds-base-alert[data-color="success"] {
+  outline-color: var(--a-border-success);
+}
+
+.navds-base-alert[data-color="success"][data-variant="moderate"] .navds-base-alert__header {
+      background: var(--a-surface-success-subtle);
+      color: var(--a-green-800);
+      border-color: var(--a-green-200);
+    }
+
+.navds-base-alert[data-color="success"][data-variant="strong"] .navds-base-alert__header {
+      background: var(--a-surface-success);
+      color: var(--a-text-on-success);
+    }
+
+.navds-base-alert[data-color="warning"] {
+  outline-color: var(--a-surface-warning);
+}
+
+.navds-base-alert[data-color="warning"][data-variant="moderate"] .navds-base-alert__header {
+      background: var(--a-surface-warning-subtle);
+      color: var(--a-orange-900);
+      border-color: var(--a-orange-200);
+    }
+
+.navds-base-alert[data-color="warning"][data-variant="strong"] .navds-base-alert__header {
+      background: var(--a-surface-warning);
+      color: var(--a-text-on-warning);
+    }
+
+.navds-base-alert[data-color="danger"] {
+  outline-color: var(--a-border-danger);
+}
+
+.navds-base-alert[data-color="danger"][data-variant="moderate"] .navds-base-alert__header {
+      background: var(--a-surface-danger-subtle);
+      color: var(--a-red-800);
+      border-color: var(--a-red-200);
+    }
+
+.navds-base-alert[data-color="danger"][data-variant="strong"] .navds-base-alert__header {
+      background: var(--a-surface-danger);
+      color: var(--a-text-on-danger);
+    }
+
+.navds-base-alert[data-color="brand-magenta"] {
+  outline-color: var(--a-border-alt-1);
+}
+
+.navds-base-alert[data-color="brand-magenta"][data-variant="moderate"] .navds-base-alert__header {
+      background: var(--a-surface-alt-1-subtle);
+      color: var(--a-purple-800);
+      border-color: var(--a-purple-200);
+    }
+
+.navds-base-alert[data-color="brand-beige"] {
+  outline-color: var(--a-border-warning);
+}
+
+.navds-base-alert[data-color="brand-beige"][data-variant="moderate"] .navds-base-alert__header {
+      background: var(--a-surface-warning-subtle);
+      color: var(--a-orange-900);
+      border-color: var(--a-orange-200);
+    }
+
+.navds-base-alert[data-color="brand-blue"] {
+  outline-color: var(--a-border-alt-3);
+}
+
+.navds-base-alert[data-color="brand-blue"][data-variant="moderate"] .navds-base-alert__header {
+      background: var(--a-surface-alt-3-subtle);
+      color: var(--a-deepblue-800);
+      border-color: var(--a-deepblue-200);
+    }
+
+.navds-base-alert[data-color="meta-lime"] {
+  outline-color: var(--a-border-alt-2);
+}
+
+.navds-base-alert[data-color="meta-lime"][data-variant="moderate"] .navds-base-alert__header {
+      background: var(--a-surface-alt-2-subtle);
+      color: var(--a-limegreen-900);
+      border-color: var(--a-limegreen-200);
+    }
+
+.navds-base-alert[data-color="meta-purple"] {
+  outline-color: var(--a-border-alt-1);
+}
+
+.navds-base-alert[data-color="meta-purple"][data-variant="moderate"] .navds-base-alert__header {
+      background: var(--a-surface-alt-1-subtle);
+      color: var(--a-purple-800);
+      border-color: var(--a-purple-200);
+    }
+
+.navds-base-alert__header {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--a-spacing-2);
+  padding: var(--a-spacing-2) var(--__ac-base-alert-pi);
+  border-bottom: 1px solid;
+}
+
+.navds-base-alert[data-global="true"] .navds-base-alert__header {
+    padding-inline: max(var(--__ac-base-alert-pi), calc((100% - var(--__ac-base-alert-header-max-width)) / 2));
+  }
+
+.navds-base-alert[data-variant="strong"] .navds-base-alert__header {
+    border-bottom: none;
+  }
+
+.navds-base-alert__header:only-child {
+    border-bottom: none;
+  }
+
+.navds-base-alert__icon {
+  font-size: 1.5rem;
+  margin-top: var(--a-spacing-1);
+  display: grid;
+}
+
+.navds-base-alert__title {
+  padding-block: var(--__ac-base-alert-title-pb);
+}
+
+.navds-base-alert__content {
+  padding: var(--__ac-base-alert-content-p);
+  background-color: var(--a-bg-default);
+}
+
+.navds-base-alert[data-global="true"] .navds-base-alert__content {
+    padding-inline: max(var(--__ac-base-alert-pi), calc((100% - var(--__ac-base-alert-header-max-width)) / 2));
+  }
+
+.navds-base-alert__close-button.navds-base-alert__close-button {
+  margin-left: auto;
+
+  /* Moved focus-outline over wrapper outline */
+  z-index: 1;
+}
+
+.navds-base-alert__close-button.navds-base-alert__close-button:focus-visible {
+    box-shadow: 0 0 0 3px white;
+  }
+
+.navds-base-alert__close-button.navds-base-alert__close-button.navds-base-alert__close-button.navds-base-alert__close-button {
+    color: var(--a-text-on-inverted);
+  }
+
+.navds-base-alert[data-color="warning"] .navds-base-alert__close-button.navds-base-alert__close-button {
+  color: var(--a-text-default);
+}
+
+:is(.navds-base-alert[data-color="warning"] .navds-base-alert__close-button.navds-base-alert__close-button):active {
+    color: var(--a-text-on-inverted);
+  }