@norges-domstoler/dds-components 17.2.1 → 17.3.0

package/dist/index.css

@@ -116,19 +116,24 @@
 /* src/components/Typography/typographyStyles.module.css */
 :root {
   --dds-color-text-body: var(--dds-color-text-default);
+  --dds-color-text-body-subtle: var(--dds-color-text-subtle);
   --dds-color-text-link: var(--dds-color-text-action-resting);
   --dds-color-text-link-visited: var(--dds-color-text-action-visited);
   --dds-color-text-label: var(--dds-color-text-medium);
   --dds-color-text-placeholder: var(--dds-color-text-subtle);
   --dds-color-text-helper: var(--dds-color-text-subtle);
+  --dds-color-icon-link: var(--dds-color-text-action-resting);
 }
 .typographyStyles_contrast {
   --dds-color-text-body: var(--dds-color-text-on-inverse);
+  --dds-color-text-body-subtle: var(--dds-color-text-on-inverse);
   --dds-color-text-link: var(--dds-color-text-on-inverse);
   --dds-color-text-link-visited: var( --dds-color-text-action-visited-on-inverse );
   --dds-color-text-label: var(--dds-color-text-on-inverse);
   --dds-color-text-helper: var(--dds-color-text-on-inverse);
   --dds-color-text-placeholder: var(--dds-color-text-subtle);
+  --dds-color-icon-link: var(--dds-color-text-on-inverse);
+  color: var(--dds-color-text-on-inverse);
 }
 :where(.typographyStyles_a) {
   font: inherit;
@@ -445,6 +450,9 @@
 :where(.typographyStyles_legend--margins) {
   margin-bottom: var(--dds-spacing-x1-5);
 }
+:where(.typographyStyles_caption--withMargins) {
+  display: table-caption;
+}
 :where(.typographyStyles_bold) {
   font-weight: 600;
 }
@@ -840,6 +848,70 @@
   border: 1px solid var(--dds-color-border-inverse);
 }
 
+/* src/components/Accordion/Accordion.module.css */
+:where(.Accordion_container) {
+  border-bottom: 1px solid var(--dds-color-border-default);
+}
+:where(.Accordion_container:first-child) {
+  border-top: 1px solid var(--dds-color-border-default);
+}
+:where(.Accordion_header-button) {
+  @media (prefers-reduced-motion: no-preference) {
+    transition: background-color 0.2s, var(--dds-focus-transition);
+  }
+  &:hover {
+    background-color: var(--dds-color-surface-hover-default);
+    color: var(--dds-color-text-action-hover);
+  }
+}
+.Accordion_header-container {
+  padding: var(--dds-spacing-x1) var(--dds-spacing-x1-5) var(--dds-spacing-x1) var(--dds-spacing-x1);
+}
+.Accordion_body {
+  height: var(--dds-card-accordion-body-height);
+}
+.Accordion_body__content {
+  padding: var(--dds-spacing-x0-5) var(--dds-spacing-x1-5) var(--dds-spacing-x2) var(--dds-spacing-x1);
+}
+
+/* src/components/helpers/AccordionBase/AccordionBase.module.css */
+:where(.AccordionBase_header-button) {
+  -webkit-user-select: text;
+  -moz-user-select: text;
+  user-select: text;
+  position: relative;
+  cursor: pointer;
+  display: block;
+  width: 100%;
+}
+.AccordionBase_header-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.AccordionBase_header__content {
+  text-align: left;
+}
+.AccordionBase_header__chevron {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: var(--dds-icon-size-medium);
+  width: var(--dds-icon-size-medium);
+  margin-left: var(--dds-spacing-x0-5);
+}
+.AccordionBase_body {
+  overflow: hidden;
+}
+.AccordionBase_body--animated {
+  @media (prefers-reduced-motion: no-preference) {
+    transition: height 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+}
+.AccordionBase_body--hidden {
+  display: none;
+}
+
 /* src/components/BackLink/BackLink.module.css */
 .BackLink_icon {
   display: inline;
@@ -914,7 +986,7 @@
   padding: var(--dds-spacing-x0-125) 0;
 }
 .Breadcrumbs_icon {
-  color: var(--dds-color-icon-action-resting);
+  color: var(--dds-color-icon-link);
 }
 
 /* src/components/Button/Button.module.css */
@@ -1261,6 +1333,7 @@
 /* src/components/Card/Card.module.css */
 .Card_container {
   border: 1px solid;
+  border-radius: var(--dds-border-radius-surface);
   @media (prefers-reduced-motion: no-preference) {
     transition: box-shadow 0.2s, border-color 0.2s;
   }
@@ -1291,13 +1364,6 @@
 
 /* src/components/Card/CardAccordion/CardAccordion.module.css */
 .CardAccordion_header-button {
-  -webkit-user-select: text;
-  -moz-user-select: text;
-  user-select: text;
-  position: relative;
-  cursor: pointer;
-  display: block;
-  width: 100%;
   @media (prefers-reduced-motion: no-preference) {
     transition: box-shadow 0.2s, var(--dds-focus-transition);
   }
@@ -1306,40 +1372,17 @@
   }
 }
 .CardAccordion_header-container {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
   padding: var(--dds-card-accordion-header-container-padding);
   @media (prefers-reduced-motion: no-preference) {
     transition: box-shadow 0.2s;
   }
 }
-.CardAccordion_header__content {
-  text-align: left;
-}
-.CardAccordion_header__chevron {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: var(--dds-icon-size-medium);
-  width: var(--dds-icon-size-medium);
-  margin-left: var(--dds-spacing-x0-5);
-}
 .CardAccordion_body {
-  overflow: hidden;
   height: var(--dds-card-accordion-body-height);
 }
 .CardAccordion_body__content {
   padding: var(--dds-card-accordion-body-content-padding);
 }
-.CardAccordion_body--animated {
-  @media (prefers-reduced-motion: no-preference) {
-    transition: height 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-  }
-}
-.CardAccordion_body--hidden {
-  display: none;
-}
 
 /* src/components/Chip/Chip.module.css */
 .Chip_container {
@@ -1357,6 +1400,11 @@
   gap: var(--dds-spacing-x0-75);
 }
 
+/* src/components/Contrast/Contrast.module.css */
+:where(.Contrast_container) {
+  background-color: var(--dds-color-surface-inverse-default);
+}
+
 /* src/components/date-inputs/common/DateInput.module.css */
 .DateInput_date-input {
   display: inline-flex;
@@ -1562,13 +1610,13 @@
 }
 .DescriptionList_list--default {
   dt {
-    color: var(--dds-color-text-default);
+    color: var(--dds-color-text-body);
     font-weight: 600;
   }
 }
 .DescriptionList_list--subtle {
   dt {
-    color: var(--dds-color-text-subtle);
+    color: var(--dds-color-text-body-subtle);
   }
 }
 .DescriptionList_list--row {
@@ -1586,7 +1634,7 @@
   align-items: center;
   display: flex;
   gap: var(--dds-spacing-x0-25);
-  color: var(--dds-color-text-default);
+  color: var(--dds-color-text-body);
 }
 .DescriptionList_group {
   margin: var(--dds-spacing-x2);
@@ -2001,7 +2049,6 @@
 
 /* src/components/Footer/Footer.module.css */
 .Footer_container {
-  background-color: var(--dds-color-brand-primary-default);
   padding-block-start: var(--dds-spacing-x3);
   padding-block-end: var(--dds-spacing-x6);
   @media only screen and (min-width: 960px) {
@@ -2404,7 +2451,7 @@
 
 /* src/components/List/List.module.css */
 .List_list {
-  color: var(--dds-color-text-default);
+  color: var(--dds-color-text-body);
   margin: var(--dds-spacing-x1) 0;
   ul,
   ol {
@@ -2429,15 +2476,21 @@
       position: absolute;
       top: calc((2.5em / 2) - 0.5em);
       left: 0;
-      background-size: contain;
-      background-repeat: no-repeat;
-      background-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');
+      background: var(--dds-color-text-body);
+      -webkit-mask-size: 100%;
+      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');
     }
     ul > li:before {
-      background-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="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');
     }
     ul > li > ul > li:before {
-      background-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="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');
     }
   }
 }
@@ -3184,7 +3237,6 @@
 
 /* src/components/SkipToContent/SkipToContent.module.css */
 .SkipToContent_wrapper {
-  background-color: var(--dds-color-surface-inverse-default);
   padding: var(--dds-spacing-x0-25);
   box-sizing: border-box;
   position: absolute;
@@ -3207,11 +3259,6 @@
   z-index: 250;
   opacity: 1;
 }
-.SkipToContent_link,
-.SkipToContent_link:hover {
-  text-decoration: none;
-  color: var(--dds-color-text-on-inverse);
-}
 
 /* src/components/SplitButton/SplitButton.module.css */
 .SplitButton_container {