@norges-domstoler/dds-components 0.0.0-dev-20240822073709 → 0.0.0-dev-20240822123620

package/dist/index.css

@@ -373,46 +373,46 @@
   margin-top: var(--dds-font-supporting-style-label-01-paragraph-spacing);
   margin-bottom: var(--dds-font-supporting-style-label-01-paragraph-spacing);
 }
-:where(.typographyStyles_supporting-style-helpertext-01) {
+:where(.typographyStyles_supporting-style-helper-text-01) {
   margin: 0;
   font: var(--dds-font-supporting-style-helpertext-01);
   letter-spacing: var(--dds-font-supporting-style-helpertext-01-letter-spacing);
   color: var(--dds-color-text-helper);
 }
-:where(.typographyStyles_supporting-style-helpertext-01--margins) {
+:where(.typographyStyles_supporting-style-helper-text-01--margins) {
   display: block;
   margin-top: var(--dds-font-supporting-style-helpertext-01-paragraph-spacing);
   margin-bottom: var( --dds-font-supporting-style-helpertext-01-paragraph-spacing );
 }
-:where(.typographyStyles_supporting-style-placeholdertext-01) {
+:where(.typographyStyles_supporting-style-placeholder-text-01) {
   margin: 0;
   font: var(--dds-font-supporting-style-placeholdertext-01);
   letter-spacing: var( --dds-font-supporting-style-placeholdertext-01-letter-spacing );
   color: var(--dds-color-text-placeholder);
 }
-:where(.typographyStyles_supporting-style-placeholdertext-01--margins) {
+:where(.typographyStyles_supporting-style-placeholder-text-01--margins) {
   display: block;
   margin-top: var( --dds-font-supporting-style-placeholdertext-01-paragraph-spacing );
   margin-bottom: var( --dds-font-supporting-style-placeholdertext-01-paragraph-spacing );
 }
-:where(.typographyStyles_supporting-style-placeholdertext-02) {
+:where(.typographyStyles_supporting-style-placeholder-text-02) {
   margin: 0;
   font: var(--dds-font-supporting-style-placeholdertext-02);
   letter-spacing: var( --dds-font-supporting-style-placeholdertext-02-letter-spacing );
   color: var(--dds-color-text-placeholder);
 }
-:where(.typographyStyles_supporting-style-placeholdertext-02--margins) {
+:where(.typographyStyles_supporting-style-placeholder-text-02--margins) {
   display: block;
   margin-top: var( --dds-font-supporting-style-placeholdertext-02-paragraph-spacing );
   margin-bottom: var( --dds-font-supporting-style-placeholdertext-02-paragraph-spacing );
 }
-:where(.typographyStyles_supporting-style-placeholdertext-03) {
+:where(.typographyStyles_supporting-style-placeholder-text-03) {
   margin: 0;
   font: var(--dds-font-supporting-style-placeholdertext-03);
   letter-spacing: var( --dds-font-supporting-style-placeholdertext-03-letter-spacing );
   color: var(--dds-color-text-placeholder);
 }
-:where(.typographyStyles_supporting-style-placeholdertext-03--margins) {
+:where(.typographyStyles_supporting-style-placeholder-text-03--margins) {
   display: block;
   margin-top: var( --dds-font-supporting-style-placeholdertext-03-paragraph-spacing );
   margin-bottom: var( --dds-font-supporting-style-placeholdertext-03-paragraph-spacing );
@@ -614,7 +614,7 @@
   border: 1px solid var(--dds-color-border-default);
   background-color: var(--dds-color-surface-default);
   padding: var(--dds-spacing-x0-75) var(--dds-spacing-x1) var(--dds-spacing-x0-75) var(--dds-spacing-x0-75);
-  border-radius: var(--dds-border-radius-1);
+  border-radius: var(--dds-border-radius-input);
   margin: 0;
   box-sizing: border-box;
   box-shadow: none;
@@ -808,7 +808,7 @@
 .Paper_container {
   box-sizing: border-box;
   background-color: var(--dds-color-surface-default);
-  border-radius: var(--dds-border-radius-1);
+  border-radius: var(--dds-border-radius-surface);
   margin: 0;
 }
 .Paper_shadow--1 {
@@ -924,7 +924,7 @@
   cursor: pointer;
   box-shadow: none;
   text-decoration: none;
-  border-radius: var(--dds-border-radius-1);
+  border-radius: var(--dds-border-radius-button);
   border: 1px solid;
   @media (prefers-reduced-motion: no-preference) {
     transition: all 0.2s;
@@ -1341,7 +1341,7 @@
   gap: var(--dds-spacing-x0-25);
   padding: var(--dds-spacing-x0-125) var(--dds-spacing-x0-25) var(--dds-spacing-x0-125) var(--dds-spacing-x0-5);
   border: 1px solid var(--dds-color-border-subtle);
-  border-radius: var(--dds-border-radius-1);
+  border-radius: var(--dds-border-radius-chip);
   background-color: var(--dds-color-surface-subtle);
 }
 .Chip_group {
@@ -1421,7 +1421,7 @@
   border: 0;
   transition: 0.2s;
   background: transparent;
-  border-radius: var(--dds-border-radius-1);
+  border-radius: var(--dds-border-radius-button);
   color: var(--dds-color-icon-default);
   &:not(:disabled):not(.DateInput_disabled):hover,
   &:not(:disabled):not(.DateInput_disabled):active {
@@ -1440,7 +1440,7 @@
 }
 .DateInput_popover {
   z-index: 100;
-  border-radius: var(--dds-border-radius-1);
+  border-radius: var(--dds-border-radius-surface);
   background-color: var(--dds-color-surface-default);
   border: 1px solid var(--dds-color-border-default);
   padding: var(--dds-spacing-x0-5);
@@ -1480,7 +1480,7 @@
   cursor: pointer;
   border: 1px solid;
   border-color: transparent;
-  border-radius: var(--dds-border-radius-1);
+  border-radius: var(--dds-border-radius-button);
   transition: 0.2s;
 }
 .DateInput_calendar__cell-button--today {
@@ -1667,7 +1667,7 @@
   display: inline-block;
   color: var(--dds-color-icon-medium);
   background-color: transparent;
-  border-radius: var(--dds-border-radius-1);
+  border-radius: var(--dds-border-radius-button);
   @media (prefers-reduced-motion: no-preference) {
     transition:
       0.2s color,
@@ -1734,7 +1734,7 @@
   gap: var(--dds-spacing-x0-5);
 }
 .Feedback_button {
-  border-radius: var(--dds-border-radius-1);
+  border-radius: var(--dds-border-radius-button);
   color: var(--dds-color-text-default);
   &:hover {
     background-color: var(--dds-color-surface-hover-default);
@@ -1901,7 +1901,7 @@
   gap: var(--dds-spacing-x1);
   border-color: var(--dds-color-border-default);
   background-color: var(--dds-color-surface-default);
-  border-radius: var(--dds-border-radius-1);
+  border-radius: var(--dds-border-radius-surface);
   padding: var(--dds-spacing-x1-5) var(--dds-spacing-x1-5) var(--dds-spacing-x2) var(--dds-spacing-x1-5);
   @media (prefers-reduced-motion: no-preference) {
     transition: background-color 0.2s, border-color 0.2s;
@@ -1925,7 +1925,7 @@
   padding: var(--dds-spacing-x0-5) var(--dds-spacing-x1);
   margin-top: var(--dds-spacing-x0-5);
   background-color: var(--dds-color-surface-subtle);
-  border-radius: var(--dds-border-radius-1);
+  border-radius: var(--dds-border-radius-surface);
   border: 1px solid var(--dds-color-border-default);
 }
 .FileUploader_file--invalid {
@@ -2133,7 +2133,7 @@
   padding: var(--dds-spacing-x0-25);
   border-color: transparent;
   background-color: transparent;
-  border-radius: var(--dds-border-radius-1);
+  border-radius: var(--dds-border-radius-input);
   @media (prefers-reduced-motion: no-preference) {
     transition:
       background-color 0.2s,
@@ -2320,7 +2320,7 @@
 .InternalHeader_nav-list__item__link {
   text-decoration: none;
   padding: var(--dds-spacing-x0-75) var(--dds-spacing-x1);
-  border-radius: var(--dds-border-radius-1);
+  border-radius: var(--dds-border-radius-surface);
   background-color: transparent;
   color: var(--dds-color-text-subtle);
   &:hover {
@@ -2404,7 +2404,7 @@
   box-sizing: border-box;
   display: grid;
   align-items: center;
-  border-radius: var(--dds-border-radius-1);
+  border-radius: var(--dds-border-radius-surface);
   padding: var(--dds-spacing-x0-75);
   gap: var(--dds-spacing-x0-5);
 }
@@ -2841,7 +2841,7 @@
   cursor: default;
 }
 .ProgressTracker_item-number {
-  border-radius: 50%;
+  border-radius: var(--dds-border-radius-rounded);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -3043,7 +3043,7 @@
 }
 .SelectionControl_label--radio {
   .SelectionControl_selection-control:after {
-    border-radius: 50%;
+    border-radius: var(--dds-border-radius-rounded);
     background-color: var(--dds-color-icon-on-action);
     height: 8px;
     width: 8px;
@@ -3098,7 +3098,7 @@
   border: 1px solid;
   border-color: var(--dds-color-border-default);
   background-color: var(--dds-color-surface-field-default);
-  border-radius: var(--dds-border-radius-1);
+  border-radius: var(--dds-border-radius-input);
   height: 18px;
   width: 18px;
   &:after {
@@ -3109,7 +3109,7 @@
   }
 }
 .SelectionControl_selection-control--radio {
-  border-radius: 50%;
+  border-radius: var(--dds-border-radius-rounded);
 }
 
 /* src/components/SkipToContent/SkipToContent.module.css */
@@ -3281,7 +3281,7 @@
 .Table_collapse-button {
   height: var(--dds-icon-size-medium);
   width: var(--dds-icon-size-medium);
-  border-radius: var(--dds-border-radius-1);
+  border-radius: var(--dds-border-radius-button);
   margin-left: auto;
   margin-right: auto;
   display: flex;
@@ -3332,8 +3332,8 @@
   color: var(--dds-color-text-medium);
   padding: var(--dds-spacing-x0-5);
   background: var(--dds-color-surface-default);
-  border-top-left-radius: var(--dds-border-radius-2);
-  border-top-right-radius: var(--dds-border-radius-2);
+  border-top-left-radius: var(--dds-border-radius-button);
+  border-top-right-radius: var(--dds-border-radius-button);
   @media (prefers-reduced-motion: no-preference) {
     transition:
       box-shadow 0.2s,
@@ -3372,7 +3372,7 @@
   border: 1px solid;
   display: inline-flex;
   align-items: center;
-  border-radius: var(--dds-border-radius-1);
+  border-radius: var(--dds-border-radius-chip);
   padding: var(--dds-spacing-x0-125) var(--dds-spacing-x0-5);
 }
 .Tag_container--with-icon {
@@ -3609,12 +3609,12 @@
   }
   &:first-child .ToggleBar_content {
     border-left: 1px solid var(--dds-color-border-default);
-    border-top-left-radius: var(--dds-border-radius-1);
-    border-bottom-left-radius: var(--dds-border-radius-1);
+    border-top-left-radius: var(--dds-border-radius-button);
+    border-bottom-left-radius: var(--dds-border-radius-button);
   }
   &:last-child .ToggleBar_content {
-    border-top-right-radius: var(--dds-border-radius-1);
-    border-bottom-right-radius: var(--dds-border-radius-1);
+    border-top-right-radius: var(--dds-border-radius-button);
+    border-bottom-right-radius: var(--dds-border-radius-button);
   }
   input:checked + .ToggleBar_content {
     color: var(--dds-color-text-on-action);
@@ -3660,7 +3660,7 @@
   width: -moz-fit-content;
   width: fit-content;
   border: 1px solid;
-  border-radius: 100px;
+  border-radius: var(--dds-border-radius-rounded);
   gap: var(--dds-spacing-x0-5);
   padding: var(--dds-spacing-x0-5) var(--dds-spacing-x1);
   background-color: var(--dds-color-surface-default);