@norges-domstoler/dds-components 22.3.0 → 22.4.1

package/dist/index.css

@@ -198,8 +198,8 @@
   }
   @media (prefers-reduced-motion: no-preference) {
     transition:
-      color 0.2s,
-      text-decoration-color 0.2s,
+      color var(--dds-motion-micro-state),
+      text-decoration-color var(--dds-motion-micro-state),
       var(--dds-focus-transition);
   }
 }
@@ -607,7 +607,7 @@
 }
 .utilStyles_visibility-transition {
   --dds-visiblity-transition: visibility 0.4s;
-  --dds-opacity-transition: opacity 0.2s;
+  --dds-opacity-transition: opacity var(--dds-motion-surface);
   opacity: 0;
   @media (prefers-reduced-motion: no-preference) {
     transition: var(--dds-visiblity-transition), var(--dds-opacity-transition);
@@ -667,7 +667,7 @@
   left: 0;
   background-color: var(--dds-color-surface-backdrop-default);
   @media (prefers-reduced-motion: no-preference) {
-    transition: opacity 0.2s;
+    transition: opacity var(--dds-motion-surface);
   }
 }
 .Backdrop_drawer {
@@ -710,7 +710,7 @@
   outline: inherit;
   width: 100%;
   @media (prefers-reduced-motion: no-preference) {
-    transition: background-color 0.2s;
+    transition: background-color var(--dds-motion-micro-state);
   }
   &:hover,
   &:active {
@@ -1688,14 +1688,14 @@
 /* src/components/Icon/Icon.module.css */
 .Icon_svg {
   display: inline-block;
-  transition: fill 0.2s;
+  transition: fill var(--dds-motion-micro-state);
   flex-shrink: 0;
 }
 
 /* src/components/Icon/icons/animated/AnimatedChevronUpDown/AnimatedChevronUpDown.module.css */
 .AnimatedChevronUpDown_svg {
   @media (prefers-reduced-motion: no-preference) {
-    --dds-chevron-transition: transform 0.2s linear;
+    --dds-chevron-transition: transform var(--dds-motion-chevron);
   }
 }
 .AnimatedChevronUpDown_group {
@@ -1751,14 +1751,13 @@
   --dds-focus-outline-offset: var(--dds-spacing-x0-125);
   --dds-focus-outline-inset: calc(0px - var(--dds-spacing-x0-25));
   --dds-focus-box-shadow: 0 0 0 2px var(--dds-color-focus-inside);
-  --dds-focus-transition: outline-offset 0.2s;
+  --dds-focus-transition: outline-offset var(--dds-motion-surface);
   --dds-input-default-width: 320px;
   --dds-input-default-width-xsmall: 210px;
   --dds-spacing-xs-icon-text-gap: var(--dds-spacing-x0-25);
   --dds-spacing-sm-icon-text-gap: var(--dds-spacing-x0-25);
   --dds-spacing-md-icon-text-gap: var(--dds-spacing-x0-5);
   --dds-spacing-lg-icon-text-gap: var(--dds-spacing-x0-75);
-  --dds-transition-duration-surface-move: 0.5s;
 }
 .ThemeProvider_global-styles {
   font: var(--dds-font-body-long-medium);
@@ -1775,7 +1774,7 @@
 }
 :where(.Accordion_header-button) {
   @media (prefers-reduced-motion: no-preference) {
-    transition: background-color 0.2s, var(--dds-focus-transition);
+    transition: background-color var(--dds-motion-micro-state), var(--dds-focus-transition);
   }
   color: inherit;
   &:hover {
@@ -1813,7 +1812,7 @@
 }
 .AccordionBase_body--animated {
   @media (prefers-reduced-motion: no-preference) {
-    transition: height 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    transition: height var(--dds-motion-surface);
   }
 }
 .AccordionBase_body--hidden {
@@ -1877,7 +1876,7 @@
   border-radius: var(--dds-border-radius-button);
   border: 1px solid;
   @media (prefers-reduced-motion: no-preference) {
-    transition: all 0.2s;
+    transition: all var(--dds-motion-micro-state);
   }
   &:active:enabled {
     scale: 0.95;
@@ -2046,8 +2045,8 @@
   border: 1px solid var(--dds-color-border-default);
   @media (prefers-reduced-motion: no-preference) {
     transition:
-      background-color 0.2s,
-      border 0.2s,
+      background-color var(--dds-motion-micro-state),
+      border var(--dds-motion-micro-state),
       var(--dds-focus-transition);
   }
 }
@@ -2062,16 +2061,16 @@
   border: 1px solid var(--dds-color-border-default);
   @media (prefers-reduced-motion: no-preference) {
     transition:
-      transform 0.2s,
-      left 0.2s,
-      border 0.2s,
-      width 0.2s;
+      transform var(--dds-motion-micro-state),
+      left var(--dds-motion-micro-state),
+      border var(--dds-motion-micro-state),
+      width var(--dds-motion-micro-state);
   }
 }
 .Toggle_thumb .Toggle_checkmark {
   opacity: 0;
   @media (prefers-reduced-motion: no-preference) {
-    transition: opacity 0.2s;
+    transition: opacity var(--dds-motion-micro-state);
   }
 }
 .Toggle_labeltext--readonly {
@@ -2257,8 +2256,8 @@
   border-radius: var(--dds-border-radius-surface);
   @media (prefers-reduced-motion: no-preference) {
     transition:
-      box-shadow 0.2s,
-      border-color 0.2s,
+      box-shadow var(--dds-motion-micro-state),
+      border-color var(--dds-motion-micro-state),
       var(--dds-focus-transition);
   }
 }
@@ -2329,7 +2328,7 @@
 }
 .CardExpandable_header-button {
   @media (prefers-reduced-motion: no-preference) {
-    transition: box-shadow 0.2s, var(--dds-focus-transition);
+    transition: box-shadow var(--dds-motion-micro-state), var(--dds-focus-transition);
   }
   &:hover {
     box-shadow: 0 0 0 2px var(--dds-color-border-action-hover);
@@ -2337,9 +2336,6 @@
 }
 .CardExpandable_header-container {
   padding: var(--dds-card-accordion-header-container-padding);
-  @media (prefers-reduced-motion: no-preference) {
-    transition: box-shadow 0.2s;
-  }
 }
 .CardExpandable_header__content {
   display: flex;
@@ -2487,10 +2483,10 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
   }
   @media (prefers-reduced-motion: no-preference) {
     transition:
-      box-shadow 0.2s,
-      background-color 0.2s,
-      border 0.2s,
-      border-color 0.2s,
+      box-shadow var(--dds-motion-micro-state),
+      background-color var(--dds-motion-micro-state),
+      border var(--dds-motion-micro-state),
+      border-color var(--dds-motion-micro-state),
       var(--dds-focus-transition);
   }
 }
@@ -2522,8 +2518,8 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
   }
   @media (prefers-reduced-motion: no-preference) {
     transition:
-      background-color 0.2s,
-      color 0.2s,
+      background-color var(--dds-motion-micro-state),
+      color var(--dds-motion-micro-state),
       var(--dds-focus-transition);
   }
 }
@@ -2628,7 +2624,7 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
   border: 1px solid;
   border-color: transparent;
   border-radius: var(--dds-border-radius-button);
-  transition: 0.2s;
+  transition: var(--dds-motion-micro-state);
 }
 .DateInput_calendar__cell-button--today {
   text-decoration: underline;
@@ -2687,9 +2683,9 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
   box-shadow: none;
   @media (prefers-reduced-motion: no-preference) {
     transition:
-      box-shadow 0.2s,
-      border-color 0.2s,
-      background-color 0.2s,
+      box-shadow var(--dds-motion-micro-state),
+      border-color var(--dds-motion-micro-state),
+      background-color var(--dds-motion-micro-state),
       var(--dds-focus-transition);
   }
   &[type=text],
@@ -2959,12 +2955,11 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
 
 /* src/components/Drawer/Drawer.module.css */
 .Drawer_container {
-  --dds-transition-duration-drawer-move: 0.2s;
   --dds-drawer-content-container-padding: var(--dds-spacing-x0-25);
   --dds-drawer-container-padding: var(--dds-spacing-x1) calc(var(--dds-spacing-x1) - var(--dds-drawer-content-container-padding)) calc(var(--dds-spacing-x1) - var(--dds-drawer-content-container-padding)) calc(var(--dds-spacing-x1-5) - var(--dds-drawer-content-container-padding));
   z-index: var(--dds-zindex-drawer);
   @media (prefers-reduced-motion: no-preference) {
-    transition: transform var(--dds-transition-duration-drawer-move);
+    transition: transform var(--dds-motion-surface);
   }
 }
 .Drawer_container--left {
@@ -3015,10 +3010,10 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
   font: inherit;
 }
 .List_list--unordered {
-  --dds-list-ul-li-padding-left: 1em + var(--dds-spacing-x0-25);
+  --dds-list-bullet-size: 0.75em;
+  --dds-list-ul-li-padding-left: var(--dds-list-bullet-size) + 0.5em;
   list-style: none;
   padding-left: calc(var(--dds-spacing-x2) - (var(--dds-list-ul-li-padding-left)));
-  --dds-list-bullet-size: 1em;
   li {
     position: relative;
     padding-left: calc(var(--dds-list-ul-li-padding-left));
@@ -3035,16 +3030,16 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
       mask-size: 100%;
       -webkit-mask-repeat: no-repeat;
       mask-repeat: no-repeat;
-      -webkit-mask-image: url('data:image/svg+xml,<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<circle cx="6.7085" cy="6.7085" r="2.625" fill="%230B0D0E"/>%0A</svg>%0A');
-      mask-image: url('data:image/svg+xml,<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<circle cx="6.7085" cy="6.7085" r="2.625" fill="%230B0D0E"/>%0A</svg>%0A');
+      -webkit-mask-image: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<circle cx="12" cy="12" r="6" fill="%230B0D0E"/>%0A</svg>%0A');
+      mask-image: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<circle cx="12" cy="12" r="6" fill="%230B0D0E"/>%0A</svg>%0A');
     }
     ul > li:before {
-      -webkit-mask-image: url('data:image/svg+xml,<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<rect x="3.04346" y="6.08691" width="7.30435" height="1.82609" fill="%230B0D0E"/>%0A</svg>%0A');
-      mask-image: url('data:image/svg+xml,<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<rect x="3.04346" y="6.08691" width="7.30435" height="1.82609" fill="%230B0D0E"/>%0A</svg>%0A');
+      -webkit-mask-image: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<rect x="4" y="10" width="15.65" height="3.9125" fill="%230B0D0E"/>%0A</svg>%0A');
+      mask-image: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<rect x="4" y="10" width="15.65" height="3.9125" fill="%230B0D0E"/>%0A</svg>%0A');
     }
     ul > li > ul > li:before {
-      -webkit-mask-image: url('data:image/svg+xml,<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<path d="M6.70817 9.33333C8.80225 9.33333 10.4998 7.50516 10.4998 5.25H2.9165C2.9165 7.50516 4.61409 9.33333 6.70817 9.33333Z" fill="%230B0D0E"/>%0A</svg>%0A');
-      mask-image: url('data:image/svg+xml,<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<path d="M6.70817 9.33333C8.80225 9.33333 10.4998 7.50516 10.4998 5.25H2.9165C2.9165 7.50516 4.61409 9.33333 6.70817 9.33333Z" fill="%230B0D0E"/>%0A</svg>%0A');
+      -webkit-mask-image: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<path d="M12 16.6154C16.4183 16.6154 20 12.7581 20 8H4C4 12.7581 7.58172 16.6154 12 16.6154Z" fill="%230B0D0E"/>%0A</svg>%0A');
+      mask-image: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<path d="M12 16.6154C16.4183 16.6154 20 12.7581 20 8H4C4 12.7581 7.58172 16.6154 12 16.6154Z" fill="%230B0D0E"/>%0A</svg>%0A');
     }
   }
 }
@@ -3071,9 +3066,9 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
   border-radius: var(--dds-border-radius-button);
   @media (prefers-reduced-motion: no-preference) {
     transition:
-      0.2s color,
-      0.2s background-color,
-      0.2s transform,
+      var(--dds-motion-micro-state) color,
+      var(--dds-motion-micro-state) background-color,
+      var(--dds-motion-micro-state) transform,
       var(--dds-focus-transition);
   }
   &:hover {
@@ -3109,7 +3104,7 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
   right: 0;
   opacity: 1;
   @media (prefers-reduced-motion: no-preference) {
-    transition: opacity 0.2s, transform 0.2s;
+    transition: opacity var(--dds-motion-micro-state), transform var(--dds-motion-micro-state);
   }
 }
 .FavStar_icon--invisible {
@@ -3143,8 +3138,8 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
   }
   @media (prefers-reduced-motion: no-preference) {
     transition:
-      background-color 0.2s,
-      color 0.2s,
+      background-color var(--dds-motion-micro-state),
+      color var(--dds-motion-micro-state),
       var(--dds-focus-transition);
   }
 }
@@ -3191,7 +3186,7 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
   background-color: var(--dds-color-surface-default);
   border-radius: var(--dds-border-radius-surface);
   @media (prefers-reduced-motion: no-preference) {
-    transition: background-color 0.2s, border-color 0.2s;
+    transition: background-color var(--dds-motion-micro-state), border-color var(--dds-motion-micro-state);
   }
 }
 .FileUploader_input-container--with-errors {
@@ -3331,8 +3326,8 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
   border-radius: var(--dds-border-radius-input);
   @media (prefers-reduced-motion: no-preference) {
     transition:
-      background-color 0.2s,
-      border-color 0.2s,
+      background-color var(--dds-motion-micro-state),
+      border-color var(--dds-motion-micro-state),
       var(--dds-focus-transition);
   }
   &:focus {
@@ -3432,8 +3427,8 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
   }
   @media (prefers-reduced-motion: no-preference) {
     transition:
-      background-color 0.2s,
-      color 0.2s,
+      background-color var(--dds-motion-micro-state),
+      color var(--dds-motion-micro-state),
       var(--dds-focus-transition);
   }
 }
@@ -3621,7 +3616,7 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
       background-color: var(--dds-color-surface-hover-default);
     }
     @media (prefers-reduced-motion: no-preference) {
-      transition: background-color 0.2s;
+      transition: background-color var(--dds-motion-micro-state);
     }
   }
   optgroup {
@@ -3808,7 +3803,7 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
   grid-template-columns: var(--dds-progress-tracker-item-number-size) 1fr;
   cursor: pointer;
   @media (prefers-reduced-motion: no-preference) {
-    transition: all 0.2s;
+    transition: all var(--dds-motion-micro-state);
   }
   &:hover > .ProgressTracker_item-number--active-incomplete {
     background-color: var(--dds-color-surface-action-resting);
@@ -3842,9 +3837,9 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
   width: var(--dds-progress-tracker-item-number-size);
   @media (prefers-reduced-motion: no-preference) {
     transition:
-      background-color 0.2s,
-      border-color 0.2s,
-      color 0.2s;
+      background-color var(--dds-motion-micro-state),
+      border-color var(--dds-motion-micro-state),
+      color var(--dds-motion-micro-state);
   }
 }
 .ProgressTracker_item-number--disabled {
@@ -3880,7 +3875,7 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
 .ProgressBar_fill {
   background-color: var(--dds-color-surface-action-resting);
   @media (prefers-reduced-motion: no-preference) {
-    transition: width 0.2s, background-color 0.2s;
+    transition: width var(--dds-motion-surface), background-color var(--dds-motion-micro-state);
   }
 }
 .ProgressBar_fill--done {
@@ -3935,8 +3930,12 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
   }
 }
 .Skeleton_container {
-  animation: Skeleton_ddsSkeletonAnimation 0.75s ease-out infinite alternate;
+  animation: Skeleton_ddsSkeletonAnimation var(--dds-motion-animation-skeleton);
   background-color: var(--dds-color-surface-skeleton);
+  @media (prefers-reduced-motion: reduce) {
+    animation: none;
+    opacity: 0.8;
+  }
 }
 
 /* src/components/SkipToContent/SkipToContent.module.css */
@@ -3946,7 +3945,7 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
   white-space: nowrap;
   opacity: 0;
   @media (prefers-reduced-motion: no-preference) {
-    transition: opacity 0.2s;
+    transition: opacity var(--dds-motion-surface);
   }
 }
 .SkipToContent_wrapper:focus-within {
@@ -4051,9 +4050,9 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
 .Table_row {
   @media (prefers-reduced-motion: no-preference) {
     transition:
-      background-color 0.2s,
-      border-color 0.2s,
-      box-shadow 0.2s;
+      background-color var(--dds-motion-micro-state),
+      border-color var(--dds-motion-micro-state),
+      box-shadow var(--dds-motion-micro-state);
   }
 }
 .Table_row--body {
@@ -4106,7 +4105,7 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
   align-items: center;
   color: inherit;
   @media (prefers-reduced-motion: no-preference) {
-    transition: all 0.2s;
+    transition: var(--dds-focus-transition);
   }
 }
 .Table_collapse-button {
@@ -4118,7 +4117,7 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
   justify-content: center;
   color: inherit;
   @media (prefers-reduced-motion: no-preference) {
-    transition: all 0.2s;
+    transition: all var(--dds-motion-micro-state);
   }
   &:hover {
     background-color: var(--dds-color-surface-hover-default);
@@ -4162,10 +4161,10 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
   border-top-right-radius: var(--dds-border-radius-button);
   @media (prefers-reduced-motion: no-preference) {
     transition:
-      box-shadow 0.2s,
-      border-bottom 0.2s,
-      color 0.2s,
-      background-color 0.2s,
+      box-shadow var(--dds-motion-micro-state),
+      border-bottom var(--dds-motion-micro-state),
+      color var(--dds-motion-micro-state),
+      background-color var(--dds-motion-micro-state),
       var(--dds-focus-transition);
   }
   &:hover {
@@ -4339,10 +4338,10 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
   border: 1px solid var(--dds-color-border-default);
   @media (prefers-reduced-motion: no-preference) {
     transition:
-      border-color 0.2s,
-      background-color 0.2s,
-      box-shadow 0.2s,
-      color 0.2s,
+      border-color var(--dds-motion-micro-state),
+      background-color var(--dds-motion-micro-state),
+      box-shadow var(--dds-motion-micro-state),
+      color var(--dds-motion-micro-state),
       var(--dds-focus-transition);
   }
 }
@@ -4391,8 +4390,8 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
   color: var(--dds-color-text-default);
   @media (prefers-reduced-motion: no-preference) {
     transition:
-      border-color 0.2s,
-      background-color 0.2s,
+      border-color var(--dds-motion-micro-state),
+      background-color var(--dds-motion-micro-state),
       var(--dds-focus-transition);
   }
   &:hover {