@navikt/ds-css 7.5.3 → 7.7.0

package/darkside/read-more.darkside.css

@@ -1,3 +1,11 @@
+.navds-read-more {
+  --__axc-read-more-icon-size: 1.5rem;
+  --__axc-read-more-pi-start: 0px;
+  --__axc-read-more-pi-end: var(--ax-spacing-1);
+  --__axc-read-more-pb: var(--ax-spacing-1);
+}
+
+/* ----------------------------- ReadMore Button ---------------------------- */
 .navds-read-more__button {
   cursor: pointer;
   margin: 0;
@@ -5,87 +13,90 @@
   background: none;
   display: flex;
   align-items: flex-start;
-  gap: var(--a-spacing-05);
-  color: var(--ac-read-more-text, var(--a-text-action));
-  border-radius: var(--a-border-radius-small);
-  padding: var(--a-spacing-1) var(--a-spacing-2) var(--a-spacing-1) var(--a-spacing-05);
+  gap: var(--ax-spacing-1);
+  color: var(--ax-text-accent);
+  padding-inline: var(--__axc-read-more-pi-start) var(--__axc-read-more-pi-end);
+  padding-block: var(--__axc-read-more-pb);
   text-align: start;
-}
-
-.navds-read-more--small .navds-read-more__button {
-  padding: var(--a-spacing-05) var(--a-spacing-1-alt) var(--a-spacing-05) var(--a-spacing-05);
-}
 
-@media (forced-colors: active) {
-  .navds-read-more__button {
-    background-color: ButtonFace;
-    border: solid 1px ButtonText;
-    color: ButtonText;
+  &:focus-visible {
+    outline: 2px solid var(--ax-border-focus);
+    outline-offset: 2px;
   }
 
-  .navds-read-more__button.navds-read-more__button:focus-visible {
-    box-shadow: none;
-    outline: 2px solid highlight;
-    outline-offset: 2px;
+  &[data-state="open"] .navds-read-more__expand-icon {
+    transform: rotateX(-180deg);
   }
 }
 
-.navds-read-more__button:hover {
-  background-color: var(--ac-read-more-hover-bg, var(--a-surface-hover));
-  color: var(--ac-read-more-hover-text, var(--a-text-action-hover));
-}
+.navds-read-more:is([data-volume="low"], :not([data-volume])) {
+  & .navds-read-more__button {
+    border-radius: var(--ax-border-radius-medium);
 
-.navds-read-more__button:active {
-  background-color: var(--ac-read-more-active-bg, var(--a-surface-active));
+    &:hover {
+      background-color: var(--ax-bg-neutral-hoverA);
+      color: var(--ax-text-accent-strong);
+    }
+  }
 }
 
-.navds-read-more__button:focus-visible {
-  outline: none;
-  box-shadow: var(--a-shadow-focus);
-}
+.navds-read-more[data-volume="high"] {
+  & .navds-read-more__button {
+    background-color: var(--ax-bg-accent-moderate);
+    border-radius: var(--ax-border-radius-full);
 
-@supports not selector(:focus-visible) {
-  .navds-read-more__button:focus {
-    outline: none;
-    box-shadow: var(--a-shadow-focus);
+    &:hover {
+      background-color: var(--ax-bg-accent-moderate-hoverA);
+      color: var(--ax-text-accent-strong);
+    }
   }
-}
 
-.navds-read-more__content {
-  margin-top: var(--a-spacing-1);
-  border-left: 2px solid var(--ac-read-more-line, var(--a-border-divider));
-  margin-left: 0.8125rem;
-  padding-left: 0.8125rem;
-  color: var(--a-text-default);
-}
+  &.navds-read-more--large {
+    --__axc-read-more-pi-start: var(--ax-spacing-3);
+    --__axc-read-more-pi-end: var(--ax-spacing-6);
+  }
 
-.navds-read-more--small .navds-read-more__content {
-  margin-left: 0.6875rem;
-  padding-left: 0.6875rem;
+  &.navds-read-more--small,
+  &.navds-read-more--medium {
+    --__axc-read-more-pi-start: var(--ax-spacing-2);
+    --__axc-read-more-pi-end: var(--ax-spacing-4);
+  }
 }
 
-.navds-read-more__content--closed {
-  display: none;
+/* ---------------------------- ReadMore Content ---------------------------- */
+.navds-read-more__content {
+  margin-top: var(--ax-spacing-2);
+  border-left: 2px solid var(--ax-border-neutral-subtleA);
+  color: var(--ax-text-default);
+  margin-left: calc(var(--__axc-read-more-pi-start) + var(--__axc-read-more-icon-size) / 2 - 1px);
+  padding-left: calc(var(--__axc-read-more-icon-size) / 2 - 1px + var(--ax-spacing-1));
+
+  &[data-state="closed"] {
+    display: none;
+  }
 }
 
 .navds-read-more__expand-icon {
-  font-size: 1.5rem;
+  font-size: var(--__axc-read-more-icon-size);
   flex-shrink: 0;
+  transition: transform 100ms cubic-bezier(0.2, 0, 0, 1);
 }
 
-.navds-read-more--small .navds-read-more__expand-icon {
-  font-size: 1.25rem;
+/* ----------------------------- ReadMore Sizes ----------------------------- */
+.navds-read-more--large {
+  --__axc-read-more-pb: var(--ax-spacing-3);
 }
 
-.navds-read-more__button:hover > .navds-read-more__expand-icon {
-  position: relative;
-  top: 1px;
+.navds-read-more--small {
+  --__axc-read-more-icon-size: 1.25rem;
+  --__axc-read-more-pb: var(--ax-spacing-05);
 }
 
-.navds-read-more--open > .navds-read-more__button > .navds-read-more__expand-icon {
-  transform: rotate(-180deg);
-}
-
-.navds-read-more--open > .navds-read-more__button:hover > .navds-read-more__expand-icon {
-  top: -1px;
+/* ------------------------- ReadMore high-contrast ------------------------- */
+@media (forced-colors: active) {
+  .navds-read-more__button {
+    background-color: ButtonFace;
+    border: solid 1px ButtonText;
+    color: ButtonText;
+  }
 }

package/darkside/skeleton.darkside.css

@@ -1,7 +1,7 @@
 .navds-skeleton {
-  background-color: var(--ac-skeleton-bg, var(--a-surface-neutral-moderate));
+  background-color: var(--ax-bg-neutral-moderateA);
   height: 1.3em;
-  animation: akselSkeletonAnimation 0.8s linear infinite alternate;
+  animation: akselSkeletonAnimation 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
   pointer-events: none;
 }
 
@@ -11,33 +11,33 @@
 
 .navds-skeleton--has-children {
   color: transparent;
-}
 
-.navds-skeleton--has-children > * {
-  visibility: hidden;
-}
+  & > * {
+    visibility: hidden;
+  }
 
-.navds-skeleton--has-children.navds-skeleton--no-height {
-  height: auto;
-}
+  &.navds-skeleton--no-height {
+    height: auto;
+  }
 
-.navds-skeleton--has-children.navds-skeleton--no-width {
-  width: fit-content;
+  &.navds-skeleton--no-width {
+    width: fit-content;
+  }
 }
 
 .navds-skeleton--text {
   height: auto;
   transform-origin: 0 55%;
   transform: scale(1, 0.6);
-  border-radius: var(--a-border-radius-medium);
-}
+  border-radius: var(--ax-border-radius-large);
 
-.navds-skeleton--text:empty::before {
-  content: "\00a0";
+  &:empty::before {
+    content: "\00a0";
+  }
 }
 
 .navds-skeleton--circle {
-  border-radius: var(--a-border-radius-full);
+  border-radius: var(--ax-border-radius-full);
 }
 
 .navds-skeleton--rectangle {
@@ -45,23 +45,20 @@
 }
 
 .navds-skeleton--rounded {
-  border-radius: var(--a-border-radius-xlarge);
+  border-radius: var(--ax-border-radius-xlarge);
 }
 
 @keyframes akselSkeletonAnimation {
-  0% {
-    opacity: 1;
-  }
-
-  100% {
-    opacity: 0.4;
+  50% {
+    opacity: 0.5;
   }
 }
 
 @media (forced-colors: active) {
   .navds-skeleton {
     forced-color-adjust: none;
-    background-color: var(--a-surface-neutral);
+    background-color: canvastext;
     animation-duration: 2s;
+    opacity: 0.2;
   }
 }