@navikt/ds-css 7.13.0 → 7.14.0

package/dist/darkside/component/tooltip.css

@@ -1,13 +1,13 @@
 @layer aksel.components {
   .navds-tooltip {
     z-index: 3000;
-    background-color: var(--ax-bg-raised);
-    color: var(--ax-text-neutral);
+    background-color: var(--ax-bg-neutral-strong);
+    color: var(--ax-text-neutral-contrast);
     border-radius: var(--ax-border-radius-medium);
     padding: 0 var(--ax-space-6);
     text-align: center;
-    border: 1px solid var(--ax-border-neutral-subtleA);
     box-shadow: var(--ax-shadow-dialog);
+    border: 1px solid rgba(0, 0, 0, 0);
     flex-direction: column;
     align-items: center;
     animation-duration: .15s;
@@ -15,6 +15,26 @@
     display: flex;
   }
 
+  .navds-tooltip:focus {
+    outline: 0;
+  }
+
+  .navds-tooltip__arrow {
+    z-index: -1;
+    background-color: var(--ax-bg-neutral-strong);
+    border-radius: 1px;
+    width: .5rem;
+    height: .5rem;
+    position: absolute;
+    transform: rotate(45deg);
+  }
+
+  @media (forced-colors: active) {
+    .navds-tooltip__arrow {
+      display: none;
+    }
+  }
+
   .navds-tooltip:where([data-state="open"]):where([data-side="bottom"]) {
     animation-name: aksel-tooltip-from-bottom, aksel-tooltip-fade-in;
   }
@@ -92,7 +112,7 @@
     color: var(--ax-text-neutral);
     padding: 0 var(--ax-space-4);
     border-radius: var(--ax-border-radius-small);
-    background: var(--ax-bg-neutral-moderateA);
+    background: var(--ax-bg-neutral-moderate);
     justify-content: center;
     align-items: center;
     min-width: 1.125rem;

package/dist/darkside/component/tooltip.min.css

@@ -1 +1 @@
-@layer aksel.components{.navds-tooltip{z-index:3000;background-color:var(--ax-bg-raised);color:var(--ax-text-neutral);border-radius:var(--ax-border-radius-medium);padding:0 var(--ax-space-6);text-align:center;border:1px solid var(--ax-border-neutral-subtleA);box-shadow:var(--ax-shadow-dialog);flex-direction:column;align-items:center;animation-duration:.15s;animation-timing-function:cubic-bezier(.16,1,.3,1);display:flex}.navds-tooltip:where([data-state=open]):where([data-side=bottom]){animation-name:aksel-tooltip-from-bottom,aksel-tooltip-fade-in}.navds-tooltip:where([data-state=open]):where([data-side=top]){animation-name:aksel-tooltip-from-top,aksel-tooltip-fade-in}.navds-tooltip:where([data-state=open]):where([data-side=left]){animation-name:aksel-tooltip-from-left,aksel-tooltip-fade-in}.navds-tooltip:where([data-state=open]):where([data-side=right]){animation-name:aksel-tooltip-from-right,aksel-tooltip-fade-in}@keyframes aksel-tooltip-from-bottom{from{transform:translateY(-4px)}to{transform:translateY(0)}}@keyframes aksel-tooltip-from-top{from{transform:translateY(4px)}to{transform:translateY(0)}}@keyframes aksel-tooltip-from-left{from{transform:translateX(4px)}to{transform:translateY(0)}}@keyframes aksel-tooltip-from-right{from{transform:translateX(-4px)}to{transform:translateY(0)}}@keyframes aksel-tooltip-fade-in{from{opacity:.01}to{opacity:1}}.navds-tooltip__keys{padding-bottom:var(--ax-space-4);gap:var(--ax-space-4);display:flex}.navds-tooltip__key{font-family:var(--ax-font-family);color:var(--ax-text-neutral);padding:0 var(--ax-space-4);border-radius:var(--ax-border-radius-small);background:var(--ax-bg-neutral-moderateA);justify-content:center;align-items:center;min-width:1.125rem;height:1.125rem;display:inline-flex}@media (forced-colors:active){.navds-tooltip__key{outline:1px solid}}}
+@layer aksel.components{.navds-tooltip{z-index:3000;background-color:var(--ax-bg-neutral-strong);color:var(--ax-text-neutral-contrast);border-radius:var(--ax-border-radius-medium);padding:0 var(--ax-space-6);text-align:center;box-shadow:var(--ax-shadow-dialog);border:1px solid transparent;flex-direction:column;align-items:center;animation-duration:.15s;animation-timing-function:cubic-bezier(.16,1,.3,1);display:flex}.navds-tooltip:focus{outline:0}.navds-tooltip__arrow{z-index:-1;background-color:var(--ax-bg-neutral-strong);border-radius:1px;width:.5rem;height:.5rem;position:absolute;transform:rotate(45deg)}@media (forced-colors:active){.navds-tooltip__arrow{display:none}}.navds-tooltip:where([data-state=open]):where([data-side=bottom]){animation-name:aksel-tooltip-from-bottom,aksel-tooltip-fade-in}.navds-tooltip:where([data-state=open]):where([data-side=top]){animation-name:aksel-tooltip-from-top,aksel-tooltip-fade-in}.navds-tooltip:where([data-state=open]):where([data-side=left]){animation-name:aksel-tooltip-from-left,aksel-tooltip-fade-in}.navds-tooltip:where([data-state=open]):where([data-side=right]){animation-name:aksel-tooltip-from-right,aksel-tooltip-fade-in}@keyframes aksel-tooltip-from-bottom{from{transform:translateY(-4px)}to{transform:translateY(0)}}@keyframes aksel-tooltip-from-top{from{transform:translateY(4px)}to{transform:translateY(0)}}@keyframes aksel-tooltip-from-left{from{transform:translateX(4px)}to{transform:translateY(0)}}@keyframes aksel-tooltip-from-right{from{transform:translateX(-4px)}to{transform:translateY(0)}}@keyframes aksel-tooltip-fade-in{from{opacity:.01}to{opacity:1}}.navds-tooltip__keys{padding-bottom:var(--ax-space-4);gap:var(--ax-space-4);display:flex}.navds-tooltip__key{font-family:var(--ax-font-family);color:var(--ax-text-neutral);padding:0 var(--ax-space-4);border-radius:var(--ax-border-radius-small);background:var(--ax-bg-neutral-moderate);justify-content:center;align-items:center;min-width:1.125rem;height:1.125rem;display:inline-flex}@media (forced-colors:active){.navds-tooltip__key{outline:1px solid}}}

package/dist/darkside/components.css

@@ -1,6 +1,22 @@
 @layer aksel.reset, aksel.theming, aksel.baseline, aksel.print, aksel.typography;
 
 @layer aksel.components {
+  .navds-theme {
+    color: var(--ax-text-neutral);
+  }
+
+  .navds-theme[data-background="true"] {
+    background-color: var(--ax-bg-default);
+  }
+
+  .navds-theme.light {
+    color-scheme: light;
+  }
+
+  .navds-theme.dark {
+    color-scheme: dark;
+  }
+
   .navds-heading {
     font-weight: var(--ax-font-weight-bold);
     margin: 0;
@@ -4816,13 +4832,13 @@
 
   .navds-tooltip {
     z-index: 3000;
-    background-color: var(--ax-bg-raised);
-    color: var(--ax-text-neutral);
+    background-color: var(--ax-bg-neutral-strong);
+    color: var(--ax-text-neutral-contrast);
     border-radius: var(--ax-border-radius-medium);
     padding: 0 var(--ax-space-6);
     text-align: center;
-    border: 1px solid var(--ax-border-neutral-subtleA);
     box-shadow: var(--ax-shadow-dialog);
+    border: 1px solid rgba(0, 0, 0, 0);
     flex-direction: column;
     align-items: center;
     animation-duration: .15s;
@@ -4830,6 +4846,26 @@
     display: flex;
   }
 
+  .navds-tooltip:focus {
+    outline: 0;
+  }
+
+  .navds-tooltip__arrow {
+    z-index: -1;
+    background-color: var(--ax-bg-neutral-strong);
+    border-radius: 1px;
+    width: .5rem;
+    height: .5rem;
+    position: absolute;
+    transform: rotate(45deg);
+  }
+
+  @media (forced-colors: active) {
+    .navds-tooltip__arrow {
+      display: none;
+    }
+  }
+
   .navds-tooltip:where([data-state="open"]):where([data-side="bottom"]) {
     animation-name: aksel-tooltip-from-bottom, aksel-tooltip-fade-in;
   }
@@ -4907,7 +4943,7 @@
     color: var(--ax-text-neutral);
     padding: 0 var(--ax-space-4);
     border-radius: var(--ax-border-radius-small);
-    background: var(--ax-bg-neutral-moderateA);
+    background: var(--ax-bg-neutral-moderate);
     justify-content: center;
     align-items: center;
     min-width: 1.125rem;
@@ -6006,22 +6042,6 @@
     justify-content: center;
     font-size: 1.5rem;
   }
-
-  .navds-theme {
-    color: var(--ax-text-neutral);
-  }
-
-  .navds-theme[data-background="true"] {
-    background-color: var(--ax-bg-default);
-  }
-
-  .navds-theme.light {
-    color-scheme: light;
-  }
-
-  .navds-theme.dark {
-    color-scheme: dark;
-  }
 }
 
 @layer aksel.layout {