@norges-domstoler/dds-components 16.1.0 → 16.2.0

package/dist/index.css

@@ -594,7 +594,7 @@
 }
 :where(.Input_input) {
   position: relative;
-  color: var(--dds-text-color--default);
+  color: var(--dds-color-text-default);
   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);
@@ -633,28 +633,26 @@
   -webkit-appearance: textfield;
   &:enabled:-moz-read-only {
     box-shadow: none;
-    border: none;
-    outline: none;
+    border: 1px solid var(--dds-color-border-default);
+    background-color: var(--dds-color-surface-field-disabled);
+    color: var(--dds-color-text-medium);
     cursor: default;
-    background-color: transparent;
-    padding-left: 0;
-    padding-top: var(--dds-spacing-x0-125);
   }
   &:not(.Input_disabled).Input_read-only,
   &:enabled:read-only {
     box-shadow: none;
-    border: none;
-    outline: none;
+    border: 1px solid var(--dds-color-border-default);
+    background-color: var(--dds-color-surface-field-disabled);
+    color: var(--dds-color-text-medium);
     cursor: default;
-    background-color: transparent;
-    padding-left: 0;
-    padding-top: var(--dds-spacing-x0-125);
   }
   &.Input_disabled,
   &:disabled {
-    cursor: not-allowed;
-    color: var(--dds-color-text-medium);
+    box-shadow: none;
+    border: 1px solid var(--dds-color-border-subtle);
     background-color: var(--dds-color-surface-field-disabled);
+    color: var(--dds-color-text-subtle);
+    cursor: not-allowed;
   }
 }
 :where(.Input_input--hover:hover) {
@@ -778,6 +776,18 @@
   flex-shrink: 0;
 }
 
+/* src/components/Typography/Label/Label.module.css */
+.Label_read-only {
+  display: flex;
+}
+.Label_read-only__icon {
+  align-self: center;
+  flex-shrink: 0;
+  margin-inline-end: var(--dds-spacing-x0-125);
+  width: 1.25em;
+  height: 1.25em;
+}
+
 /* src/components/helpers/Paper/Paper.module.css */
 .Paper_container {
   box-sizing: border-box;
@@ -1300,7 +1310,7 @@
   width: max-content;
   font-variant-numeric: tabular-nums;
   outline: none;
-  &:focus:not([aria-readonly]) {
+  &:focus {
     background-color: var(--dds-color-surface-action-selected);
     color: var(--dds-color-text-on-action);
   }
@@ -1310,7 +1320,7 @@
   width: 100%;
   font-variant-numeric: tabular-nums;
   pointer-events: none;
-  .DateInput_segment:focus:not([aria-readonly]) & {
+  .DateInput_segment:focus & {
     color: var(--dds-color-text-on-action);
   }
 }
@@ -1325,7 +1335,13 @@
   justify-content: center;
   margin-inline: -1px 0;
   padding: var(--dds-spacing-x0-25);
-  color: var(--dds-color-text-default);
+  color: var(--dds-color-icon-default);
+}
+.DateInput_icon-wrapper--disabled {
+  color: var(--dds-color-icon-subtle);
+}
+.DateInput_icon-wrapper--readonly {
+  color: var(--dds-color-icon-medium);
 }
 .DateInput_icon-wrapper--small {
   margin-block: calc(0px - var(--dds-icon-size-medium));
@@ -1352,6 +1368,9 @@
     color: var(--dds-color-text-subtle);
   }
 }
+.DateInput_popover-button--readonly:disabled {
+  color: var(--dds-color-text-medium);
+}
 .DateInput_popover {
   z-index: 100;
   border-radius: var(--dds-border-radius-1);
@@ -1403,11 +1422,11 @@
 }
 .DateInput_calendar__cell-button--default {
   background-color: transparent;
-  color: var(--dds-text-color--default);
+  color: var(--dds-color-text-default);
   &:hover {
     background-color: var(--dds-color-surface-hover-default);
     border-color: var(--dds-color-border-action-hover);
-    color: var(--dds-text-color--default);
+    color: var(--dds-color-text-default);
   }
 }
 .DateInput_calendar__cell-button--selected {
@@ -2340,6 +2359,9 @@
 .Select_container--disabled {
   cursor: not-allowed;
 }
+.Select_container--readonly {
+  cursor: default;
+}
 .Select_inner-single-value {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -2352,16 +2374,16 @@
   margin-left: -1px;
 }
 .Select_control {
-  &:hover .Select_dropdown-indicator,
+  &:hover:not(.Select_control--readonly) .Select_dropdown-indicator,
   &:focus-within .Select_dropdown-indicator {
     color: var(--dds-color-icon-action-hover);
   }
-  &.Select_control--readonly .Select_dropdown-indicator {
-    color: transparent;
-  }
-  &.Select_control--disabled .Select_dropdown-indicator {
-    color: transparent;
-  }
+}
+.Select_control--readonly .Select_dropdown-indicator {
+  pointer-events: none;
+}
+.Select_control--disabled .Select_dropdown-indicator {
+  pointer-events: none;
 }
 
 /* src/components/Select/NativeSelect/NativeSelect.module.css */
@@ -2385,14 +2407,21 @@
   }
   &:disabled {
     cursor: not-allowed;
-    color: var(--dds-color-text-medium);
+    color: var(--dds-color-text-subtle);
     background-color: var(--dds-color-surface-field-disabled);
+    border-color: var(--dds-color-border-subtle);
+    + svg {
+      color: var(--dds-color-icon-subtle);
+    }
   }
   option {
     background-color: var(--dds-color-surface-default);
     &:hover {
       background-color: var(--dds-color-surface-hover-default);
     }
+    @media (prefers-reduced-motion: no-preference) {
+      transition: background-color 0.2s;
+    }
   }
   optgroup {
     font-weight: normal;
@@ -2401,13 +2430,13 @@
 }
 .NativeSelect_select--readonly {
   box-shadow: none;
-  pointer-events: none;
-  border: none;
   outline: none;
   cursor: default;
-  background-color: transparent;
-  padding-left: 0;
-  padding-top: var(--dds-spacing-x0-125);
+  color: var(--dds-color-text-subtle);
+  background-color: var(--dds-color-surface-field-disabled);
+  + svg {
+    color: var(--dds-color-icon-subtle);
+  }
 }
 .NativeSelect_select--medium {
   height: calc(1.5em + var(--dds-spacing-x0-75) + var(--dds-spacing-x0-75) + 2px);
@@ -2421,6 +2450,12 @@
   height: calc(1.5em + var(--dds-spacing-x0-25) + var(--dds-spacing-x0-25) + 2px);
   padding-right: var(--dds-spacing-x1);
 }
+.NativeSelect_select--multiple {
+  padding-right: 0;
+  &.NativeSelect_select--readonly option {
+    background-color: var(--dds-color-surface-field-disabled);
+  }
+}
 .NativeSelect_icon {
   position: absolute;
   top: 50%;
@@ -2677,7 +2712,7 @@
         var(--dds-focus-transition);
     }
   }
-  &:hover input:enabled:not(:checked) ~ .SelectionControl_selection-control {
+  &:hover:not(.SelectionControl_label--readonly) input:enabled:not(:checked) ~ .SelectionControl_selection-control {
     background-color: var(--dds-color-surface-hover-default);
     box-shadow: inset 0 0 0 1px var(--dds-color-border-action-hover);
     border-color: var(--dds-color-border-action-hover);
@@ -2687,8 +2722,13 @@
     border-color: var(--dds-color-surface-action-selected);
     background-color: var(--dds-color-surface-action-selected);
   }
-  &:hover input:checked:enabled[type=checkbox] ~ .SelectionControl_selection-control,
-  &:hover input:enabled[data-indeterminate=true] ~ .SelectionControl_selection-control {
+  &.SelectionControl_label--readonly input:checked:enabled ~ .SelectionControl_selection-control,
+  &.SelectionControl_label--readonly input:enabled[data-indeterminate=true] ~ .SelectionControl_selection-control {
+    border-color: var(--dds-color-surface-action-selected-disabled);
+    background-color: var(--dds-color-surface-action-selected-disabled);
+  }
+  &:hover:not(.SelectionControl_label--readonly) input:checked:enabled[type=checkbox] ~ .SelectionControl_selection-control,
+  &:hover:not(.SelectionControl_label--readonly) input:enabled[data-indeterminate=true] ~ .SelectionControl_selection-control {
     background-color: var(--dds-color-surface-action-hover);
     border-color: var(--dds-color-surface-action-hover);
   }
@@ -2740,6 +2780,7 @@
 }
 .SelectionControl_label--readonly {
   cursor: default;
+  color: var(--dds-color-text-medium);
   input ~ .SelectionControl_selection-control {
     border-color: var(--dds-color-border-default);
     background-color: var(--dds-color-surface-field-disabled);
@@ -3119,7 +3160,14 @@
 }
 
 /* src/components/TextInput/TextInput.module.css */
-.TextInput_container--medium {
+.TextInput_container {
+  color: var(--dds-color-text-default);
+}
+.TextInput_container--readonly {
+  color: var(--dds-color-text-medium);
+}
+.TextInput_container--disabled {
+  color: var(--dds-color-text-subtle);
 }
 .TextInput_container--tiny {
   width: 210px;
@@ -3149,7 +3197,6 @@
 .TextInput_icon {
   position: absolute;
   z-index: 1;
-  color: var(--dds-color-icon-default);
 }
 .TextInput_icon--medium {
   left: var(--dds-spacing-x0-75);
@@ -3175,28 +3222,21 @@
   align-items: center;
   pointer-events: none;
   z-index: 1;
-  &.TextInput_prefix {
-    left: 0;
-    margin-left: 8px;
-    padding-right: 8px;
-    border-right: 1px solid var(--dds-color-border-default);
-  }
-  &.TextInput_suffix {
-    right: 0;
-    margin-right: 8px;
-    padding-left: 8px;
-    border-left: 1px solid var(--dds-color-border-default);
-  }
-  &.TextInput_prefix--readonly {
-    margin-left: 0;
-    padding-right: 0.5ch;
-    border-right: none;
-  }
-  &.TextInput_suffix--readonly {
-    margin-right: 0;
-    padding-left: 0.5ch;
-    border-left: none;
-  }
+}
+.TextInput_prefix {
+  left: 0;
+  margin-left: 8px;
+  padding-right: 8px;
+  border-right: 1px solid var(--dds-color-border-default);
+}
+.TextInput_suffix {
+  right: 0;
+  margin-right: 8px;
+  padding-left: 8px;
+  border-left: 1px solid var(--dds-color-border-default);
+}
+.TextInput_affix--disabled {
+  border-color: var(--dds-color-border-subtle);
 }
 .TextInput_message-container {
   display: flex;