@navikt/ds-css 7.12.2 → 7.14.0

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;
@@ -1037,11 +1053,11 @@
   }
 
   .navds-confirmation-panel__inner {
-    gap: var(--a-spacing-3);
-    padding: var(--a-spacing-4);
-    border-radius: var(--a-border-radius-medium);
-    border: 1px solid var(--ac-confirmation-panel-border, var(--a-border-warning));
-    background-color: var(--ac-confirmation-panel-bg, var(--a-surface-warning-subtle));
+    gap: var(--ax-space-12);
+    padding: var(--ax-space-16);
+    border-radius: var(--ax-border-radius-large);
+    border: 1px solid var(--ax-border-default);
+    background-color: var(--ax-bg-moderate);
     flex-direction: column;
     justify-self: stretch;
     transition: background-color .1s linear;
@@ -1053,20 +1069,6 @@
     max-width: 80ch;
   }
 
-  .navds-confirmation-panel--checked .navds-confirmation-panel__inner {
-    border-color: var(--ac-confirmation-panel-checked-border, var(--a-border-success));
-    background-color: var(--ac-confirmation-panel-checked-bg, var(--a-surface-success-subtle));
-  }
-
-  .navds-confirmation-panel--error .navds-confirmation-panel__inner {
-    border-color: var(--ac-confirmation-panel-error-border, var(--a-border-danger));
-    background-color: var(--ac-confirmation-panel-error-bg, var(--a-surface-danger-subtle));
-  }
-
-  .navds-confirmation-panel--error .navds-checkbox__input:hover:not(:disabled) + .navds-checkbox__label {
-    color: var(--a-text-default);
-  }
-
   @media (forced-colors: active) {
     .navds-confirmation-panel__inner:before {
       content: "";
@@ -1074,8 +1076,8 @@
       border-color: orange;
       border-left-style: solid;
       border-left-width: 8px;
-      border-start-start-radius: calc(var(--a-border-radius-medium)  - 1px);
-      border-end-start-radius: calc(var(--a-border-radius-medium)  - 1px);
+      border-start-start-radius: calc(var(--ax-border-radius-large)  - 1px);
+      border-end-start-radius: calc(var(--ax-border-radius-large)  - 1px);
       height: 100%;
       position: absolute;
       top: 0;
@@ -3218,21 +3220,21 @@
   }
 
   .navds-dropdown__menu {
-    padding: var(--a-spacing-2) 0;
-    color: var(--ac-dropdown-text, var(--a-text-default));
+    padding: var(--ax-space-8);
+    color: var(--ax-text-neutral);
     width: 27ch;
     max-height: 616px;
     overflow: hidden auto;
   }
 
   .navds-dropdown__divider {
-    margin: var(--a-spacing-3) 0;
+    margin: var(--ax-space-12) 0;
     border: none;
-    border-bottom: 1px solid var(--a-border-divider);
+    border-bottom: 1px solid var(--ax-border-neutral-subtle);
   }
 
   .navds-dropdown__menu > :not(.navds-dropdown__divider, .navds-dropdown__list) {
-    margin: 0 var(--a-spacing-4) var(--a-spacing-3);
+    margin: 0 var(--ax-space-16) var(--ax-space-12);
   }
 
   .navds-dropdown__list {
@@ -3246,18 +3248,20 @@
   }
 
   .navds-dropdown__list-heading {
-    margin: var(--a-spacing-1) var(--a-spacing-4) var(--a-spacing-3);
+    margin-block: var(--ax-space-4) var(--ax-space-12);
+    margin-inline: var(--ax-space-4);
   }
 
   .navds-dropdown__item {
-    color: var(--ac-dropdown-item-text, var(--a-text-action));
     font: inherit;
     text-align: left;
     cursor: pointer;
     align-items: center;
-    gap: var(--a-spacing-2);
+    gap: var(--ax-space-8);
     width: 100%;
-    padding: var(--a-spacing-1) var(--a-spacing-4);
+    padding: var(--ax-space-4);
+    border-radius: var(--ax-border-radius-medium);
+    color: var(--ax-text-neutral);
     background: none;
     border: none;
     margin: 0;
@@ -3267,31 +3271,19 @@
   }
 
   .navds-dropdown__item:hover {
-    background-color: var(--ac-dropdown-item-hover-bg, var(--a-surface-action-subtle-hover));
-    color: var(--ac-dropdown-item-hover-text, var(--a-text-action-hover));
+    background-color: var(--ax-bg-accent-moderate-hoverA);
   }
 
   .navds-dropdown__item:active {
-    background-color: var(--ac-dropdown-item-active-bg, var(--a-surface-action-active));
-    color: var(--ac-dropdown-item-active-text, var(--a-text-on-action));
+    background-color: var(--ax-bg-accent-moderate-pressedA);
   }
 
   .navds-dropdown__item:focus-visible {
-    outline-offset: -2px;
-    box-shadow: inset 0 0 0 2px var(--a-border-focus);
-    outline: 2px solid rgba(0, 0, 0, 0);
-  }
-
-  @supports not selector(:focus-visible) {
-    .navds-dropdown__item:focus {
-      outline-offset: -2px;
-      box-shadow: inset 0 0 0 2px var(--a-border-focus);
-      outline: 2px solid rgba(0, 0, 0, 0);
-    }
+    outline: 3px solid var(--ax-border-focus);
+    outline-offset: -3px;
   }
 
   .navds-dropdown__item:disabled {
-    color: var(--ac-dropdown-item-text, var(--a-text-action));
     opacity: var(--ax-opacity-disabled);
     cursor: not-allowed;
     background: none;
@@ -3974,6 +3966,43 @@
     color: var(--ax-text-neutral-subtle);
   }
 
+  .navds-link-panel {
+    color: var(--ax-text-neutral);
+    justify-content: space-between;
+    align-items: center;
+    gap: var(--ax-space-16);
+    text-decoration: none;
+    display: flex;
+  }
+
+  .navds-link-panel:hover {
+    border-color: var(--ax-border-accent);
+  }
+
+  .navds-link-panel:hover .navds-link-panel__title {
+    color: var(--ax-text-accent-subtle);
+    text-decoration: underline;
+  }
+
+  .navds-link-panel:focus-visible {
+    outline: 3px solid var(--ax-border-focus);
+    outline-offset: 3px;
+  }
+
+  .navds-link-panel__chevron {
+    flex-shrink: 0;
+    font-size: 1.5rem;
+    transition: transform .2s;
+  }
+
+  .navds-link-panel:hover > .navds-link-panel__chevron, .navds-link-panel:focus-within > .navds-link-panel__chevron {
+    transform: translateX(4px);
+  }
+
+  .navds-link-panel__description {
+    margin-top: var(--a-space-4);
+  }
+
   .navds-loader {
     stroke-width: 6px;
     --__axc-loader-stroke-width: 5.9;
@@ -4803,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;
@@ -4817,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;
   }
@@ -4894,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;
@@ -5024,14 +5073,14 @@
   }
 
   .navds-panel {
-    background-color: var(--ac-panel-bg, var(--a-surface-default));
-    padding: var(--a-spacing-4);
-    border-radius: var(--a-border-radius-small);
+    background-color: var(--ax-bg-default);
+    padding: var(--ax-space-16);
+    border-radius: var(--ax-border-radius-small);
     border: 1px solid rgba(0, 0, 0, 0);
   }
 
   .navds-panel--border {
-    border-color: var(--ac-panel-border, var(--a-border-default));
+    border-color: var(--ax-border-neutral);
   }
 
   .navds-read-more {
@@ -5993,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 {