@digdir/designsystemet-css 0.11.0-alpha.7 → 0.11.0-alpha.9

package/skeleton.css

@@ -1,60 +1,59 @@
-@layer ds.skeleton {
-  .ds-skeleton {
-    --dsc-skeleton-animation-duration: 0.8s;
+.ds-skeleton {
+  --dsc-skeleton-animation-duration: 0.8s;
+  --dsc-skeleton-background: var(--ds-color-neutral-surface-default);
+
+  height: 1.3em;
+  pointer-events: none;
+  user-select: none;
+  background-color: var(--dsc-skeleton-background);
+  animation: ds-skeleton-opacity-fade var(--dsc-skeleton-animation-duration) linear infinite alternate;
+}
 
-    height: 1.3em;
-    pointer-events: none;
-    user-select: none;
-    background-color: var(--ds-color-neutral-surface-default);
-    animation: ds-skeleton-opacity-fade var(--dsc-skeleton-animation-duration) linear infinite alternate;
-  }
+.ds-skeleton--circle {
+  width: 1.3em;
+  border-radius: var(--ds-border-radius-full);
+  aspect-ratio: 1 / 1;
+}
 
-  .ds-skeleton--circle {
-    width: 1.3em;
-    border-radius: var(--ds-border-radius-full);
-    aspect-ratio: 1 / 1;
-  }
+.ds-skeleton--rectangle {
+  width: 100%;
+  border-radius: min(1rem, var(--ds-border-radius-lg));
+}
 
-  .ds-skeleton--rectangle {
-    width: 100%;
-    border-radius: min(1rem, var(--ds-border-radius-lg));
-  }
+.ds-skeleton--text {
+  width: 100%;
+  height: auto;
+  transform-origin: 0 55%;
+  transform: scale(1, 0.6);
+  border-radius: var(--ds-border-radius-full);
+}
 
-  .ds-skeleton--text {
-    width: 100%;
-    height: auto;
-    transform-origin: 0 55%;
-    transform: scale(1, 0.6);
-    border-radius: var(--ds-border-radius-full);
-  }
+.ds-skeleton--text:empty::before {
+  content: '\00a0';
+}
 
-  .ds-skeleton--text:empty::before {
-    content: '\00a0';
-  }
+.ds-skeleton--has-children {
+  width: fit-content;
+  height: fit-content;
+  color: transparent !important;
+}
 
-  .ds-skeleton--has-children {
-    width: fit-content;
-    height: fit-content;
-    color: transparent !important;
-  }
+.ds-skeleton--has-children > * {
+  visibility: hidden;
+}
 
-  .ds-skeleton--has-children > * {
-    visibility: hidden;
+@media (prefers-reduced-motion: reduce) {
+  .ds-skeleton {
+    --dsc-skeleton-animation-duration: 1.6s;
   }
+}
 
-  @media (prefers-reduced-motion: reduce) {
-    .ds-skeleton {
-      --dsc-skeleton-animation-duration: 1.6s;
-    }
+@keyframes ds-skeleton-opacity-fade {
+  0% {
+    opacity: 1;
   }
 
-  @keyframes ds-skeleton-opacity-fade {
-    0% {
-      opacity: 1;
-    }
-
-    100% {
-      opacity: 0.4;
-    }
+  100% {
+    opacity: 0.4;
   }
 }

package/skiplink.css

@@ -1,44 +1,44 @@
-@layer ds.skiplink {
-  .ds-skiplink:focus {
-    display: block;
-    outline: 0;
-    position: static;
-    width: auto;
-    height: auto;
-    margin: inherit;
-    overflow: visible;
-    clip: auto;
-    clip-path: none;
-    white-space: inherit;
-    text-decoration: none;
-    padding: var(--ds-spacing-3) var(--ds-spacing-4) var(--ds-spacing-3) var(--ds-spacing-6);
-    color: var(--ds-color-neutral-text-default);
-    background: var(--ds-color-neutral-backround-default);
-  }
+.ds-skiplink:focus {
+  display: grid;
+  place-items: center;
+  outline: 0;
+  position: static;
+  width: auto;
+  height: auto;
+  margin: inherit;
+  overflow: visible;
+  clip: auto;
+  clip-path: none;
+  white-space: inherit;
+  text-decoration: none;
+  padding: var(--ds-spacing-3) var(--ds-spacing-4) var(--ds-spacing-3) var(--ds-spacing-6);
+  color: var(--ds-color-neutral-text-default);
+  background: var(--ds-color-accent-surface-default);
+}
 
-  .ds-skiplink__content {
-    --dsc-skiplink-padding: var(--ds-spacing-2) var(--ds-spacing-4);
-    --dsc-skiplink-border-width: 3px;
+.ds-skiplink__content {
+  --dsc-skiplink-padding: var(--ds-spacing-2) var(--ds-spacing-4);
+  --dsc-skiplink-border-width: 3px;
 
-    display: flex;
-    align-items: center;
-    border: var(--ds-border-width-default) solid transparent;
-    background-color: transparent;
-    color: var(--ds-color-accent-text-subtle);
-    border-color: var(--ds-color-accent-border-strong);
-    width: fit-content;
-    padding: var(--dsc-skiplink-padding);
-    box-sizing: border-box;
-    cursor: pointer;
-    font-family: inherit;
-    justify-content: center;
-    text-align: center;
-    text-decoration: none;
-    position: relative;
-    border-radius: var(--ds-border-radius-md);
-    min-height: var(--ds-sizing-10);
-    outline: var(--dsc-skiplink-border-width) solid var(--ds-color-focus-outer);
-    outline-offset: var(--dsc-skiplink-border-width);
-    box-shadow: 0 0 0 var(--dsc-skiplink-border-width) var(--ds-color-focus-inner);
-  }
+  display: flex;
+  align-items: center;
+  border: var(--ds-border-width-default) solid transparent;
+  background-color: transparent;
+  color: var(--ds-color-accent-text-subtle);
+  border-color: var(--ds-color-accent-border-strong);
+  width: fit-content;
+  padding: var(--dsc-skiplink-padding);
+  margin: var(--ds-spacing-1);
+  box-sizing: border-box;
+  cursor: pointer;
+  font-family: inherit;
+  justify-content: center;
+  text-align: center;
+  text-decoration: none;
+  position: relative;
+  border-radius: var(--ds-border-radius-md);
+  min-height: var(--ds-sizing-10);
+  outline: var(--dsc-skiplink-border-width) solid var(--ds-color-focus-outer);
+  outline-offset: var(--dsc-skiplink-border-width);
+  box-shadow: 0 0 0 var(--dsc-skiplink-border-width) var(--ds-color-focus-inner);
 }

package/spinner.css

@@ -1,67 +1,69 @@
-@layer ds.spinner {
+.ds-spinner {
+  --dsc-spinner-background: var(--ds-color-neutral-surface-default);
+  --dsc-spinner-stroke: var(--ds-color-accent-base-default);
+
+  animation: ds-spinner-rotate-animation linear infinite;
+  animation-duration: 2s;
+}
+
+.ds-spinner__circle {
+  stroke: var(--dsc-spinner-stroke);
+  stroke-dasharray: 1px, 200px;
+  transform-origin: center;
+  animation: ds-spinner-stroke-animation ease-in-out infinite;
+  animation-duration: 2s;
+}
+
+/* Prefers reduced motion needs longer animation,
+but don't remove it since it is not decorative.
+*/
+@media (prefers-reduced-motion: reduce) {
   .ds-spinner {
-    animation: ds-spinner-rotate-animation linear infinite;
-    animation-duration: 2s;
+    animation-duration: 6s;
   }
 
   .ds-spinner__circle {
-    stroke-dasharray: 1px, 200px;
-    transform-origin: center;
-    animation: ds-spinner-stroke-animation ease-in-out infinite;
-    animation-duration: 2s;
+    animation-duration: 6s;
   }
+}
 
-  /* Prefers reduced motion needs longer animation,
-    but don't remove it since it is not decorative.
-   */
-  @media (prefers-reduced-motion: reduce) {
-    .ds-spinner {
-      animation-duration: 6s;
-    }
+.ds-spinner--neutral {
+  --dsc-spinner-stroke: var(--ds-color-neutral-border-default);
+}
 
-    .ds-spinner__circle {
-      animation-duration: 6s;
-    }
-  }
+.ds-spinner--accent {
+  --dsc-spinner-stroke: var(--ds-color-accent-base-default);
+}
 
-  .ds-spinner--neutral .ds-spinner__circle {
-    stroke: var(--ds-color-neutral-border-default);
-  }
+.ds-spinner__background {
+  stroke: var(--dsc-spinner-background);
+}
 
-  .ds-spinner--accent .ds-spinner__circle {
-    stroke: var(--ds-color-accent-base-default);
+@keyframes ds-spinner-rotate-animation {
+  0% {
+    transform: rotate(0deg);
   }
 
-  .ds-spinner__background {
-    stroke: var(--ds-color-neutral-surface-default);
+  100% {
+    transform: rotate(360deg);
   }
+}
 
-  @keyframes ds-spinner-rotate-animation {
-    0% {
-      transform: rotate(0deg);
-    }
-
-    100% {
-      transform: rotate(360deg);
-    }
+@keyframes ds-spinner-stroke-animation {
+  0% {
+    stroke-dasharray: 1px, 200px;
+    stroke-dashoffset: 0;
   }
 
-  @keyframes ds-spinner-stroke-animation {
-    0% {
-      stroke-dasharray: 1px, 200px;
-      stroke-dashoffset: 0;
-    }
-
-    50% {
-      stroke-dasharray: 100px, 200px;
-      stroke-dashoffset: -15px;
-      transform: rotate(0deg);
-    }
+  50% {
+    stroke-dasharray: 100px, 200px;
+    stroke-dashoffset: -15px;
+    transform: rotate(0deg);
+  }
 
-    100% {
-      stroke-dasharray: 1px, 200px;
-      stroke-dashoffset: -120px;
-      transform: rotate(15deg);
-    }
+  100% {
+    stroke-dasharray: 1px, 200px;
+    stroke-dashoffset: -120px;
+    transform: rotate(15deg);
   }
 }