@norges-domstoler/dds-components 22.5.0 → 22.7.0

package/dist/index.css

@@ -1454,6 +1454,11 @@
   }
 }
 
+/* src/components/layout/Contrast/Contrast.module.css */
+:where(.Contrast_container) {
+  background-color: var(--dds-color-surface-inverse-default);
+}
+
 /* src/components/layout/Grid/Grid.module.css */
 .Grid_dds-grid-template-columns {
   --dds-r-grid-template-columns: var(--dds-r-xs-grid-template-columns);
@@ -2563,12 +2568,10 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
   }
 }
 
-/* src/components/Contrast/Contrast.module.css */
-:where(.Contrast_container) {
-  background-color: var(--dds-color-surface-inverse-default);
-}
-
 /* src/components/CookieBanner/CookieBanner.module.css */
+.CookieBanner_container:focus-visible {
+  outline: none;
+}
 .CookieBanner_checkbox-label {
   padding: 0 0 0 calc(var(--dds-size-icon-component) + var(--dds-spacing-x0-5));
   align-items: flex-start;
@@ -3042,7 +3045,7 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
   margin: var(--dds-spacing-x1) 0;
   ul,
   ol {
-    margin: 0;
+    margin-block: var(--dds-font-paragraph-spacing-list);
   }
 }
 .List_list--inherit {
@@ -3062,7 +3065,7 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
       height: var(--dds-list-bullet-size);
       width: var(--dds-list-bullet-size);
       position: absolute;
-      top: calc((var(--dds-font-lineheight-list) * 1em) / 2 - var(--dds-list-bullet-size) / 2);
+      top: calc((var(--dds-font-lineheight-x1) * 1em) / 2 - var(--dds-list-bullet-size) / 2);
       left: 0;
       background: var(--dds-color-text-body);
       -webkit-mask-size: 100%;
@@ -3092,7 +3095,7 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
   }
 }
 .List_li {
-  line-height: var(--dds-font-lineheight-list);
+  margin-bottom: var(--dds-font-paragraph-spacing-list);
 }
 
 /* src/components/FavStar/FavStar.module.css */
@@ -4036,7 +4039,7 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
 }
 .Table_table--with-dividers {
   .Table_row--body {
-    border-bottom: 1px solid var(--dds-color-border-default);
+    border-bottom: 1px solid var(--dds-color-border-subtle);
   }
   .Table_row--colapsible-header--open {
     border-bottom: none;
@@ -4381,7 +4384,7 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
   box-sizing: border-box;
   cursor: pointer;
   background-color: var(--dds-color-surface-default);
-  border: 1px solid var(--dds-color-border-default);
+  border: 1px solid;
   @media (prefers-reduced-motion: no-preference) {
     transition:
       border-color var(--dds-motion-micro-state),
@@ -4392,9 +4395,6 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
   }
 }
 .ToggleBar_label {
-  &:hover .ToggleBar_content {
-    background-color: var(--dds-color-surface-hover-default);
-  }
   &:first-child .ToggleBar_content {
     margin-inline-end: -1px;
     border-top-left-radius: var(--dds-border-radius-button);
@@ -4407,16 +4407,37 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
   &:not(:first-child):not(:last-child) .ToggleBar_content {
     margin-inline-end: -1px;
   }
+  input:focus-visible + .ToggleBar_content,
+  input:checked + .ToggleBar_content {
+    position: relative;
+    z-index: 0;
+    border-radius: var(--dds-border-radius-button);
+  }
+}
+.ToggleBar_label--primary {
+  .ToggleBar_content {
+    border-color: var(--dds-color-border-default);
+  }
+  &:hover .ToggleBar_content {
+    background-color: var(--dds-color-surface-hover-default);
+  }
   input:checked + .ToggleBar_content {
     color: var(--dds-color-text-on-action);
     border-color: var(--dds-color-surface-action-selected);
     background-color: var(--dds-color-surface-action-selected);
-    position: relative;
-    z-index: 0;
   }
-  input:focus-visible + .ToggleBar_content {
-    position: relative;
-    z-index: 0;
+}
+.ToggleBar_label--secondary {
+  .ToggleBar_content {
+    border-color: var(--dds-color-border-subtle);
+  }
+  &:hover .ToggleBar_content {
+    background-color: var(--dds-color-surface-hover-subtle);
+  }
+  input:checked + .ToggleBar_content {
+    color: var(--dds-color-text-default);
+    border-color: var(--dds-color-border-default);
+    background-color: var(--dds-color-surface-selected-default);
   }
 }