@navikt/ds-css 0.7.4 → 0.8.3

package/form/checkbox-group.css

@@ -1,13 +1,13 @@
-.navds-checkbox-group--s > .navds-checkboxes {
+.navds-checkbox-group--small > .navds-checkboxes {
   display: flex;
   flex-direction: column;
   gap: 4px;
 }
 
-.navds-fieldset.navds-checkbox-group--m > .navds-checkboxes {
+.navds-fieldset.navds-checkbox-group--medium > .navds-checkboxes {
   margin-top: 0;
 }
 
-.navds-fieldset.navds-checkbox-group--m > .navds-fieldset__error {
+.navds-fieldset.navds-checkbox-group--medium > .navds-fieldset__error {
   margin-top: 0;
 }

package/form/checkbox.css

@@ -1,3 +1,25 @@
+:root {
+  --navds-checkbox-color-background: var(--navds-color-white);
+  --navds-checkbox-color-border: var(--navds-color-gray-60);
+  --navds-checkbox-color-label-hover: var(--navds-color-blue-50);
+  --navds-checkbox-color-border-hover: var(--navds-color-blue-50);
+  --navds-checkbox-color-background-hover: var(--navds-color-blue-10);
+  --navds-checkbox-color-description: var(--navds-color-gray-80);
+  --navds-checkbox-color-border-checked: var(--navds-color-blue-50);
+  --navds-checkbox-color-background-checked: var(--navds-color-blue-50);
+  --navds-checkbox-color-shadow-error: var(--navds-color-red-50);
+  --navds-checkbox-color-border-error: var(--navds-color-red-50);
+
+  /* Disabled */
+  --navds-checkbox-color-label-disabled: var(--navds-color-gray-40);
+  --navds-checkbox-color-border-disabled: var(--navds-color-gray-60);
+  --navds-checkbox-color-background-disabled: var(--navds-color-gray-10);
+  --navds-checkbox-color-border-checked-disabled: var(--navds-color-gray-40);
+  --navds-checkbox-color-background-checked-disabled: var(
+    --navds-color-gray-40
+  );
+}
+
 .navds-checkbox {
   position: relative;
   padding: var(--navds-spacing-3) 0;
@@ -24,7 +46,7 @@
 
 .navds-checkbox__description {
   padding-left: calc(48px - 12px);
-  color: var(--navds-color-gray-80);
+  color: var(--navds-checkbox-color-description);
 }
 
 .navds-checkbox--with-description {
@@ -45,37 +67,37 @@
 
 .navds-checkbox__label::before {
   content: "";
-  background-color: white;
-  border: 1px solid var(--navds-color-border);
+  background-color: var(--navds-checkbox-color-background);
+  border: 1px solid var(--navds-checkbox-color-border);
   width: 1.5rem;
   height: 1.5rem;
   border-radius: 4px;
   flex-shrink: 0;
 }
 
-.navds-checkbox--s {
+.navds-checkbox--small {
   padding: var(--navds-spacing-1) 0;
 }
 
-.navds-checkbox--s > .navds-checkbox__input {
+.navds-checkbox--small > .navds-checkbox__input {
   width: 24px;
   height: 24px;
   top: 2px;
   left: 0;
 }
 
-.navds-checkbox--s > .navds-checkbox__label::before {
+.navds-checkbox--small > .navds-checkbox__label::before {
   margin-top: -2px;
   margin-bottom: -2px;
 }
 
 .navds-checkbox__input:hover + .navds-checkbox__label {
-  color: var(--navds-color-blue-50);
+  color: var(--navds-checkbox-color-label-hover);
 }
 
 .navds-checkbox__input:hover + .navds-checkbox__label::before {
-  border-color: var(--navds-color-blue-50);
-  background-color: var(--navds-color-blue-10);
+  border-color: var(--navds-checkbox-color-border-hover);
+  background-color: var(--navds-checkbox-color-background-hover);
 }
 
 .navds-checkbox__input:focus + .navds-checkbox__label::before {
@@ -87,8 +109,8 @@
   background-position: center center;
   background-repeat: no-repeat;
   background-size: 75%;
-  border: 2px solid var(--navds-color-blue-50);
-  background-color: var(--navds-color-blue-50);
+  border: 2px solid var(--navds-checkbox-color-border-checked);
+  background-color: var(--navds-checkbox-color-background-checked);
 }
 
 .navds-checkbox__input:checked:focus + .navds-checkbox__label::before {
@@ -99,26 +121,26 @@
 .navds-checkbox--error
   > .navds-checkbox__input:not(:hover):not(:focus):not(:disabled):not(:checked)
   + .navds-checkbox__label::before {
-  box-shadow: 0 0 0 1px var(--navds-color-red-50);
-  border-color: var(--navds-color-red-50);
+  box-shadow: 0 0 0 1px var(--navds-checkbox-color-shadow-error);
+  border-color: var(--navds-checkbox-color-border-error);
 }
 
-.navds-checkbox--s .navds-error-message {
+.navds-checkbox--small .navds-error-message {
   margin-top: 4px;
 }
 
 .navds-checkbox__input:disabled,
 .navds-checkbox__input:disabled + .navds-checkbox__label {
-  color: var(--navds-color-gray-40);
+  color: var(--navds-checkbox-color-label-disabled);
   cursor: not-allowed;
 }
 
 .navds-checkbox__input:disabled + .navds-checkbox__label::before {
-  background-color: var(--navds-color-gray-10);
-  border-color: var(--navds-color-gray-60);
+  background-color: var(--navds-checkbox-color-background-disabled);
+  border-color: var(--navds-checkbox-color-border-disabled);
 }
 
 .navds-checkbox__input:disabled:checked + .navds-checkbox__label::before {
-  background-color: var(--navds-color-gray-40);
-  border-color: var(--navds-color-gray-40);
+  background-color: var(--navds-checkbox-color-background-checked-disabled);
+  border-color: var(--navds-checkbox-color-border-checked-disabled);
 }

package/form/confirmation-panel.css

@@ -1,10 +1,40 @@
+:root {
+  --navds-confirmation-panel-color-background: var(
+    --navds-color-warning-background
+  );
+  --navds-confirmation-panel-color-background-checked: var(
+    --navds-color-success-background
+  );
+  --navds-confirmation-panel-color-border-checked: var(
+    --navds-color-success-background
+  );
+  --navds-confirmation-panel-color-background-error: var(
+    --navds-color-error-background
+  );
+  --navds-confirmation-panel-color-checkbox-background-checked-hover: var(
+    --navds-color-green-70
+  );
+  --navds-confirmation-panel-color-checkbox-border-checked-hover: var(
+    --navds-color-green-70
+  );
+  --navds-confirmation-panel-color-checkbox-background-checked: var(
+    --navds-color-green-50
+  );
+  --navds-confirmation-panel-color-checkbox-border-checked: var(
+    --navds-color-green-50
+  );
+  --navds-confirmation-panel-color-checkbox-label-checked: var(
+    --navds-color-darkgray
+  );
+}
+
 .navds-confirmation-panel {
   display: flex;
   flex-direction: column;
   gap: var(--navds-spacing-4);
   padding: var(--navds-spacing-4);
   border-radius: 4px;
-  background-color: #ffeccc;
+  background-color: var(--navds-confirmation-panel-color-background);
   transition: background-color linear 100ms;
 }
 
@@ -12,18 +42,18 @@
   max-width: 80ch;
 }
 
-.navds-confirmation-panel--s {
+.navds-confirmation-panel--small {
   padding: var(--navds-spacing-3);
   gap: var(--navds-spacing-2);
 }
 
 .navds-confirmation-panel--checked {
-  background-color: #ccf1d6;
-  border-color: #ccf1d6;
+  background-color: var(--navds-confirmation-panel-color-background-checked);
+  border-color: var(--navds-confirmation-panel-color-border-checked);
 }
 
 .navds-confirmation-panel--error {
-  background-color: var(--navds-color-error-background);
+  background-color: var(--navds-confirmation-panel-color-background-error);
   border: 1px solid transparent;
 }
 
@@ -36,23 +66,29 @@
 .navds-confirmation-panel--checked
   .navds-checkbox__input:hover
   + .navds-checkbox__label {
-  color: var(--navds-color-darkgray);
+  color: var(--navds-confirmation-panel-color-checkbox-label-checked);
 }
 
 .navds-confirmation-panel--checked
   .navds-checkbox__input
   + .navds-checkbox__label::before {
   transition: none;
-  background-color: var(--navds-color-green-50);
-  border-color: var(--navds-color-green-50);
+  background-color: var(
+    --navds-confirmation-panel-color-checkbox-background-checked
+  );
+  border-color: var(--navds-confirmation-panel-color-checkbox-border-checked);
   background-image: var(--navds-checkmark-image-white);
 }
 
 .navds-confirmation-panel--checked
   .navds-checkbox__input:hover
   + .navds-checkbox__label::before {
-  background-color: var(--navds-color-green-70);
-  border-color: var(--navds-color-green-70);
+  background-color: var(
+    --navds-confirmation-panel-color-checkbox-background-checked-hover
+  );
+  border-color: var(
+    --navds-confirmation-panel-color-checkbox-border-checked-hover
+  );
 }
 
 .navds-confirmation-panel--checked

package/form/error-message.css

@@ -1,4 +1,8 @@
+:root {
+  --navds-error-message-color-text: var(--navds-color-text-error);
+}
+
 .navds-error-message {
   display: block;
-  color: var(--navds-color-red-50);
+  color: var(--navds-error-message-color-text);
 }

package/form/error-summary.css

@@ -1,10 +1,15 @@
+:root {
+  --navds-error-summary-color-background: var(--navds-color-white);
+  --navds-error-summary-color-border: var(--navds-color-error-border);
+}
+
 .navds-error-summary {
-  background-color: #fff;
+  background-color: var(--navds-error-summary-color-background);
   padding: var(--navds-spacing-4);
-  border: 4px solid #ba3a26;
+  border: 4px solid var(--navds-error-summary-color-border);
 }
 
-.navds-error-summary--s {
+.navds-error-summary--small {
   padding: var(--navds-spacing-2);
 }
 
@@ -20,6 +25,6 @@
   gap: 0.25rem;
 }
 
-.navds-error-summary--s > .navds-error-summary__list {
+.navds-error-summary--small > .navds-error-summary__list {
   margin: 0.5rem 0;
 }

package/form/fieldset.css

@@ -9,7 +9,7 @@
   margin-top: 8px;
 }
 
-.navds-fieldset--s > :not(:first-child):not(:empty) {
+.navds-fieldset--small > :not(:first-child):not(:empty) {
   margin-top: 4px;
 }
 

package/form/form.css

@@ -3,8 +3,8 @@
   margin-top: 8px;
 }
 
-.navds-form-field--s > :not(:first-child):not(:empty),
-.navds-form-field--s > input:not(:first-child) {
+.navds-form-field--small > :not(:first-child):not(:empty),
+.navds-form-field--small > input:not(:first-child) {
   margin-top: 4px;
 }
 

package/form/radio-group.css

@@ -1,13 +1,13 @@
-.navds-radio-group--s > .navds-radio-buttons {
+.navds-radio-group--small > .navds-radio-buttons {
   display: flex;
   flex-direction: column;
   gap: 4px;
 }
 
-.navds-fieldset.navds-radio-group--m > .navds-radio-buttons {
+.navds-fieldset.navds-radio-group--medium > .navds-radio-buttons {
   margin-top: 0;
 }
 
-.navds-fieldset.navds-radio-group--m > .navds-fieldset__error {
+.navds-fieldset.navds-radio-group--medium > .navds-fieldset__error {
   margin-top: 0;
 }

package/form/radio.css

@@ -1,3 +1,27 @@
+:root {
+  --navds-radio-color-description: var(--navds-color-gray-80);
+  --navds-radio-color-background: var(--navds-color-white);
+  --navds-radio-color-border: var(--navds-color-gray-60);
+  --navds-radio-color-label-hover: var(--navds-color-blue-50);
+  --navds-radio-color-border-hover: var(--navds-color-blue-50);
+  --navds-radio-color-background-hover: var(--navds-color-blue-10);
+  --navds-radio-color-border-checked: var(--navds-color-blue-50);
+  --navds-radio-color-shadow-checked: var(--navds-color-blue-50);
+  --navds-radio-color-shadow-checked-focus: var(--navds-color-blue-80);
+  --navds-radio-color-shadow-background-checked-focus: var(--navds-color-white);
+  --navds-radio-color-shadow-dot-checked-focus: var(--navds-color-blue-50);
+  --navds-radio-color-shadow-error: var(--navds-color-red-50);
+  --navds-radio-color-border-error: var(--navds-color-red-50);
+
+  /* Disabled */
+  --navds-radio-color-background-disabled: var(--navds-color-gray-10);
+  --navds-radio-color-border-disabled: var(--navds-color-gray-60);
+  --navds-radio-color-label-disabled: var(--navds-color-gray-40);
+  --navds-radio-color-background-disabled-checked: var(--navds-color-gray-40);
+  --navds-radio-color-border-disabled-checked: var(--navds-color-gray-40);
+  --navds-radio-color-shadow-disabled-checked: var(--navds-color-gray-40);
+}
+
 .navds-radio {
   position: relative;
   padding: var(--navds-spacing-3) 0;
@@ -33,7 +57,7 @@
 
 .navds-radio__description {
   padding-left: calc(48px - 12px);
-  color: var(--navds-color-gray-80);
+  color: var(--navds-radio-color-description);
 }
 
 .navds-radio--with-description {
@@ -46,8 +70,8 @@
 
 .navds-radio__label::before {
   content: "";
-  background-color: white;
-  border: 1px solid var(--navds-color-border);
+  background-color: var(--navds-radio-color-background);
+  border: 1px solid var(--navds-radio-color-border);
   width: 1.5rem;
   height: 1.5rem;
   border-radius: 4px;
@@ -55,29 +79,29 @@
   border-radius: 50%;
 }
 
-.navds-radio--s {
+.navds-radio--small {
   padding: var(--navds-spacing-1) 0;
 }
 
-.navds-radio--s > .navds-radio__input {
+.navds-radio--small > .navds-radio__input {
   width: 24px;
   height: 24px;
   top: 2px;
   left: 0;
 }
 
-.navds-radio--s > .navds-radio__label::before {
+.navds-radio--small > .navds-radio__label::before {
   margin-top: -2px;
   margin-bottom: -2px;
 }
 
 .navds-radio__input:hover + .navds-radio__label {
-  color: var(--navds-color-blue-50);
+  color: var(--navds-radio-color-label-hover);
 }
 
 .navds-radio__input:hover + .navds-radio__label::before {
-  border-color: var(--navds-color-blue-50);
-  background-color: var(--navds-color-blue-10);
+  border-color: var(--navds-radio-color-border-hover);
+  background-color: var(--navds-radio-color-background-hover);
 }
 
 .navds-radio__input:focus + .navds-radio__label::before {
@@ -85,40 +109,43 @@
 }
 
 .navds-radio__input:checked + .navds-radio__label::before {
-  border: 2px solid var(--navds-color-blue-50);
-  box-shadow: 0 0 0 3px #fff inset, 0 0 0 2rem var(--navds-color-blue-50) inset;
+  border: 2px solid var(--navds-radio-color-border-checked);
+  box-shadow: 0 0 0 3px #fff inset,
+    0 0 0 2rem var(--navds-radio-color-shadow-checked) inset;
 }
 
 .navds-radio__input:checked:focus + .navds-radio__label::before {
   transition: box-shadow 200ms cubic-bezier(0.465, 0.183, 0.153, 0.946);
-  box-shadow: 0 0 0 3px var(--navds-color-blue-80), 0 0 0 3px #fff inset,
-    0 0 0 2rem var(--navds-color-blue-50) inset;
+  box-shadow: 0 0 0 3px var(--navds-radio-color-shadow-checked-focus),
+    0 0 0 3px var(--navds-radio-color-shadow-background-checked-focus) inset,
+    0 0 0 2rem var(--navds-radio-color-shadow-dot-checked-focus) inset;
 }
 
 .navds-radio--error
   > .navds-radio__input:not(:hover):not(:focus):not(:disabled):not(:checked)
   + .navds-radio__label::before {
-  box-shadow: 0 0 0 1px var(--navds-color-red-50);
-  border-color: var(--navds-color-red-50);
+  box-shadow: 0 0 0 1px var(--navds-radio-color-shadow-error);
+  border-color: var(--navds-radio-color-border-error);
 }
 
-.navds-radio--s .navds-error-message {
+.navds-radio--small .navds-error-message {
   margin-top: 4px;
 }
 
 .navds-radio__input:disabled,
 .navds-radio__input:disabled + .navds-radio__label {
-  color: var(--navds-color-gray-40);
+  color: var(--navds-radio-color-label-disabled);
   cursor: not-allowed;
 }
 
 .navds-radio__input:disabled + .navds-radio__label::before {
-  background-color: var(--navds-color-gray-10);
-  border-color: var(--navds-color-gray-60);
+  background-color: var(--navds-radio-color-background-disabled);
+  border-color: var(--navds-radio-color-border-disabled);
 }
 
 .navds-radio__input:disabled:checked + .navds-radio__label::before {
-  background-color: var(--navds-color-gray-40);
-  border-color: var(--navds-color-gray-40);
-  box-shadow: 0 0 0 3px #fff inset, 0 0 0 2rem var(--navds-color-gray-40) inset;
+  background-color: var(--navds-radio-color-background-disabled-checked);
+  border-color: var(--navds-radio-color-border-disabled-checked);
+  box-shadow: 0 0 0 3px #fff inset,
+    0 0 0 2rem var(--navds-radio-color-shadow-disabled-checked) inset;
 }

package/form/search-field.css

@@ -1,9 +1,17 @@
+:root {
+  --navds-search-field-color-shadow-error: var(--navds-color-red-50);
+  --navds-search-field-color-border-error: var(--navds-color-red-50);
+  --navds-search-field-color-clearbutton-border: var(--navds-color-gray-60);
+}
+
 .navds-search-field__input-wrapper {
   display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
-.navds-form-field--s .navds-search-field__input {
-  padding: 0.25rem;
+.navds-form-field--small .navds-search-field__input {
+  padding: 0.15rem;
   min-height: 32px;
 }
 
@@ -22,11 +30,16 @@
 }
 
 .navds-search-field__input-wrapper :focus {
-  z-index: 1;
+  z-index: var(--navds-z-index-focus);
+}
+
+.navds-search-field__button,
+.navds-search-field__clear-button {
+  flex-shrink: 0;
 }
 
 .navds-search-field--error
   .navds-search-field__input:not(:hover):not(:focus):not(:disabled) {
-  box-shadow: 0 0 0 1px var(--navds-color-red-50) inset;
-  border-color: var(--navds-color-red-50);
+  box-shadow: 0 0 0 1px var(--navds-search-field-color-shadow-error) inset;
+  border-color: var(--navds-search-field-color-border-error);
 }

package/form/select.css

@@ -1,9 +1,20 @@
+:root {
+  --navds-select-color-background: var(--navds-color-white);
+  --navds-select-color-border: var(--navds-color-gray-60);
+  --navds-select-color-border-hover: var(--navds-color-blue-50);
+  --navds-select-color-border-error: var(--navds-color-red-50);
+  --navds-select-color-shadow-error: var(--navds-color-red-50);
+  --navds-select-color-border-disabled: var(--navds-color-gray-40);
+  --navds-select-color-background-disabled: var(--navds-color-gray-10);
+  --navds-select-color-text-disabled: var(--navds-color-darkgray);
+}
+
 .navds-select__input {
   appearance: none;
   padding: 0.5rem;
-  background-color: white;
+  background-color: var(--navds-select-color-background);
   border-radius: 4px;
-  border: 1px solid var(--navds-color-gray-40);
+  border: 1px solid var(--navds-select-color-border);
   width: 100%;
   box-sizing: border-box;
   min-height: 48px;
@@ -13,7 +24,7 @@
 }
 
 .navds-select__input:hover {
-  border-color: var(--navds-color-blue-50);
+  border-color: var(--navds-select-color-border-hover);
 }
 
 .navds-select__input:focus {
@@ -35,7 +46,7 @@
   pointer-events: none;
 }
 
-.navds-form-field--s .navds-select__input {
+.navds-form-field--small .navds-select__input {
   min-height: 32px;
   padding: 0.25rem;
 }
@@ -44,19 +55,16 @@
   Error handling
 */
 .navds-select--error > * select:not(:hover):not(:focus):not(:disabled) {
-  box-shadow: 0 0 0 1px var(--navds-color-red-50);
-  border-color: var(--navds-color-red-50);
+  box-shadow: 0 0 0 1px var(--navds-select-color-shadow-error);
+  border-color: var(--navds-select-color-border-error);
 }
 
-/*
-  Disabled handling
-  TODO: Oppdatere farger her
- */
+/* Disabled handling */
 .navds-select__input:disabled,
 .navds-select__input[read-only] {
-  background-color: var(--navds-color-gray-10);
-  border-color: var(--navds-color-gray-40);
+  background-color: var(--navds-select-color-background-disabled);
+  border-color: var(--navds-select-color-border-disabled);
   box-shadow: none;
-  color: var(--navds-color-darkgray);
+  color: var(--navds-select-color-text-disabled);
   cursor: not-allowed;
 }

package/form/text-field.css

@@ -1,20 +1,31 @@
+:root {
+  --navds-text-field-color-background: var(--navds-color-white);
+  --navds-text-field-color-border: var(--navds-color-gray-60);
+  --navds-text-field-color-border-hover: var(--navds-color-blue-50);
+  --navds-text-field-color-border-error: var(--navds-color-red-50);
+  --navds-text-field-color-shadow-error: var(--navds-color-red-50);
+  --navds-text-field-color-border-disabled: var(--navds-color-gray-40);
+  --navds-text-field-color-background-disabled: var(--navds-color-gray-10);
+  --navds-text-field-color-text-disabled: var(--navds-color-darkgray);
+}
+
 .navds-text-field__input {
   appearance: none;
   padding: 0.5rem;
-  background-color: white;
+  background-color: var(--navds-text-field-color-background);
   border-radius: 4px;
-  border: 1px solid var(--navds-color-border);
+  border: 1px solid var(--navds-text-field-color-border);
   min-height: 48px;
   width: 100%;
 }
 
-.navds-form-field--s > .navds-text-field__input {
-  padding: 0.25rem;
+.navds-form-field--small > .navds-text-field__input {
+  padding: 0.15rem;
   min-height: 32px;
 }
 
 .navds-text-field__input:hover {
-  border-color: var(--navds-color-blue-50);
+  border-color: var(--navds-text-field-color-border-hover);
 }
 
 .navds-text-field__input:focus {
@@ -27,19 +38,26 @@
 */
 .navds-text-field--error
   > .navds-text-field__input:not(:hover):not(:focus):not(:disabled) {
-  box-shadow: 0 0 0 1px var(--navds-color-red-50);
-  border-color: var(--navds-color-red-50);
+  box-shadow: 0 0 0 1px var(--navds-text-field-color-shadow-error);
+  border-color: var(--navds-text-field-color-border-error);
 }
 
-/*
-  TODO: Oppdater denne til riktige farger
-  Disabled handling
- */
+/* Disabled handling */
 .navds-text-field__input:disabled,
 .navds-text-field__input[readonly] {
-  background-color: #f1f1f1;
-  border-color: #6a6a6a;
+  background-color: var(--navds-text-field-color-background-disabled);
+  border-color: var(--navds-text-field-color-border-disabled);
   box-shadow: none;
-  color: #262626;
+  color: var(--navds-text-field-color-text-disabled);
   cursor: not-allowed;
 }
+
+/**
+  * Removes default search icon
+  */
+.navds-text-field__input[type="search"]::-webkit-search-decoration,
+.navds-text-field__input[type="search"]::-webkit-search-cancel-button,
+.navds-text-field__input[type="search"]::-webkit-search-results-button,
+.navds-text-field__input[type="search"]::-webkit-search-results-decoration {
+  -webkit-appearance: none;
+}