@digdir/designsystemet-css 0.9.1-alpha.2 → 0.10.0-alpha.0

package/accordion.css

@@ -1,4 +1,4 @@
-@layer fds.accordion {
+@layer ds.accordion {
   .fds-accordion {
     --dsc-accordion-border-radius: var(--ds-border-radius-md);
     --dsc-accordion-border-color: var(--ds-color-neutral-border-subtle);
@@ -14,6 +14,12 @@
 
   .fds-accordion__expand-icon {
     border-radius: var(--ds-border-radius-md);
+    fill: var(--ds-color-neutral-text-default);
+    color: var(--ds-color-neutral-text-default);
+  }
+
+  .fds-accordion__expand-icon path {
+    fill: var(--ds-color-neutral-text-default);
   }
 
   .fds-accordion__content {
@@ -40,9 +46,9 @@
     padding: var(--ds-spacing-4);
   }
 
-  .fds-accordion--border .fds-accordion__button {
-    border-radius: var(--dsc-accordion-border-radius);
-  }
+  /* .fds-accordion--border .fds-accordion__button {
+    border-radius: 0;
+  } */
 
   .fds-accordion__item:focus-within {
     position: relative;
@@ -64,21 +70,21 @@
 
   .fds-accordion--brand1,
   .fds-accordion--brand1 .fds-accordion__button {
-    --dsc-accordion-border-color: var(--ds-color-brand1-base-default);
+    --dsc-accordion-border-color: var(--ds-color-brand1-border-subtle);
 
     background: var(--ds-color-brand1-surface-default);
   }
 
   .fds-accordion--brand2,
   .fds-accordion--brand2 .fds-accordion__button {
-    --dsc-accordion-border-color: var(--ds-color-brand2-base-default);
+    --dsc-accordion-border-color: var(--ds-color-brand2-border-subtle);
 
     background: var(--ds-color-brand2-surface-default);
   }
 
   .fds-accordion--brand3,
   .fds-accordion--brand3 .fds-accordion__button {
-    --dsc-accordion-border-color: var(--ds-color-brand3-base-default);
+    --dsc-accordion-border-color: var(--ds-color-brand3-border-subtle);
 
     background: var(--ds-color-brand3-surface-default);
   }
@@ -104,6 +110,16 @@
     border-top: 1px solid var(--ds-color-neutral-background-default);
   }
 
+  .fds-accordion--border .fds-accordion__item:first-of-type .fds-accordion__button:first-of-type {
+    border-top-left-radius: var(--dsc-accordion-border-radius);
+    border-top-right-radius: var(--dsc-accordion-border-radius);
+  }
+
+  .fds-accordion--border .fds-accordion__item:last-of-type:not(.fds-accordion__item--open) .fds-accordion__button:first-of-type {
+    border-bottom-left-radius: var(--dsc-accordion-border-radius);
+    border-bottom-right-radius: var(--dsc-accordion-border-radius);
+  }
+
   @media (hover: hover) and (pointer: fine) {
     .fds-accordion__button:hover .fds-accordion__expand-icon {
       background-color: rgba(0 0 0 / 0.1);

package/alert.css

@@ -1,4 +1,4 @@
-@layer fds.alert {
+@layer ds.alert {
   .fds-alert {
     --dsc-alert-border-color: var(--ds-color-info-border-strong);
     --dsc-alert-border-radius: var(--ds-border-radius-md);

package/box.css

@@ -1,4 +1,4 @@
-@layer fds.box {
+@layer ds.box {
   .fds-box--xs-shadow {
     box-shadow: var(--ds-shadow-xs);
   }
@@ -20,7 +20,7 @@
   }
 
   .fds-box--default-border-color {
-    border: 1px solid var(--ds-color-neutral-border-strong);
+    border: 1px solid var(--ds-color-neutral-border-default);
   }
 
   .fds-box--subtle-border-color {
@@ -28,7 +28,7 @@
   }
 
   .fds-box--strong-border-color {
-    border: 1px solid var(--ds-color-neutral-base-default);
+    border: 1px solid var(--ds-color-neutral-base-strong);
   }
 
   .fds-box--sm-border-radius {

package/button.css

@@ -1,4 +1,4 @@
-@layer fds.btn {
+@layer ds.btn {
   .fds-btn {
     --dsc-btn-padding: var(--ds-spacing-2) var(--ds-spacing-4);
 
@@ -27,7 +27,7 @@
   .fds-btn:disabled,
   .fds-btn[aria-disabled='true'] {
     cursor: not-allowed;
-    opacity: var(--ds-opacity-disabled);
+    opacity: var(--ds-disabled-opacity);
   }
 
   .fds-btn--sm {
@@ -97,10 +97,6 @@
     background-color: var(--ds-color-neutral-base-default);
   }
 
-  .fds-btn--primary:where(.fds-btn--success) {
-    background-color: var(--ds-color-success-base-default);
-  }
-
   .fds-btn--primary:where(.fds-btn--danger) {
     background-color: var(--ds-color-danger-base-default);
   }
@@ -115,32 +111,22 @@
       background-color: var(--ds-color-neutral-base-hover);
     }
 
-    .fds-btn--primary:where(.fds-btn--success):not([aria-disabled='true'], :disabled):hover {
-      background-color: var(--ds-color-success-base-hover);
-    }
-
     .fds-btn--primary:where(.fds-btn--danger):not([aria-disabled='true'], :disabled):hover {
       background-color: var(--ds-color-danger-base-hover);
     }
 
     .fds-btn--secondary:where(.fds-btn--accent):not([aria-disabled='true'], :disabled):hover {
-      color: var(--ds-color-accent-base-hover);
-      border-color: var(--ds-color-accent-base-hover);
+      color: var(--ds-color-accent-text-default);
+      border-color: var(--ds-color-accent-border-strong);
       background-color: var(--ds-color-accent-surface-default);
     }
 
     .fds-btn--secondary:where(.fds-btn--neutral):not([aria-disabled='true'], :disabled):hover {
-      color: var(--ds-color-neutral-base-hover);
-      border-color: var(--ds-color-neutral-base-hover);
+      color: var(--ds-color-neutral-text-default);
+      border-color: var(--ds-color-neutral-border-strong);
       background-color: var(--ds-color-neutral-surface-default);
     }
 
-    .fds-btn--secondary:where(.fds-btn--success):not([aria-disabled='true'], :disabled):hover {
-      color: var(--ds-color-success-base-default);
-      border-color: var([delete]);
-      background-color: var(--ds-color-success-surface-default);
-    }
-
     .fds-btn--secondary:where(.fds-btn--danger):not([aria-disabled='true'], :disabled):hover {
       color: var(--ds-color-danger-text-default);
       border-color: var(--ds-color-danger-border-strong);
@@ -148,20 +134,15 @@
     }
 
     .fds-btn--tertiary:where(.fds-btn--accent):not([aria-disabled='true'], :disabled):hover {
-      color: var(--ds-color-accent-base-hover);
+      color: var(--ds-color-accent-text-default);
       background-color: var(--ds-color-accent-surface-default);
     }
 
     .fds-btn--tertiary:where(.fds-btn--neutral):not([aria-disabled='true'], :disabled):hover {
-      color: var(--ds-color-neutral-base-hover);
+      color: var(--ds-color-neutral-text-default);
       background-color: var(--ds-color-neutral-surface-default);
     }
 
-    .fds-btn--tertiary:where(.fds-btn--success):not([aria-disabled='true'], :disabled):hover {
-      color: var(--ds-color-success-base-default);
-      background-color: var(--ds-color-success-surface-default);
-    }
-
     .fds-btn--tertiary:where(.fds-btn--danger):not([aria-disabled='true'], :disabled):hover {
       color: var(--ds-color-danger-text-default);
       background-color: var(--ds-color-danger-surface-default);
@@ -176,57 +157,41 @@
     background-color: var(--ds-color-neutral-base-active);
   }
 
-  .fds-btn--primary:where(.fds-btn--success):not([aria-disabled='true'], :disabled):active {
-    background-color: var(--ds-color-success-base-active);
-  }
-
   .fds-btn--primary:where(.fds-btn--danger):not([aria-disabled='true'], :disabled):active {
     background-color: var(--ds-color-danger-base-active);
   }
 
   /* Secondary button colors */
   .fds-btn--secondary:where(.fds-btn--accent) {
-    color: var(--ds-color-accent-base-default);
-    border-color: var(--ds-color-accent-base-default);
-    background-color: var(--ds-color-accent-background-default);
+    color: var(--ds-color-accent-text-subtle);
+    border-color: var(--ds-color-accent-border-strong);
+    background-color: transparent;
   }
 
   .fds-btn--secondary:where(.fds-btn--neutral) {
-    color: var(--ds-color-neutral-base-default);
-    border-color: var(--ds-color-neutral-base-default);
-    background-color: var(--ds-color-neutral-background-default);
-  }
-
-  .fds-btn--secondary:where(.fds-btn--success) {
-    color: var(--ds-color-success-base-default);
-    border-color: var(--ds-color-success-border-default);
-    background-color: var(--ds-color-success-background-default);
+    color: var(--ds-color-neutral-text-subtle);
+    border-color: var(--ds-color-neutral-border-strong);
+    background-color: transparent;
   }
 
   .fds-btn--secondary:where(.fds-btn--danger) {
     color: var(--ds-color-danger-text-subtle);
-    border-color: var(--ds-color-danger-border-default);
-    background-color: var(--ds-color-danger-background-default);
+    border-color: var(--ds-color-danger-border-strong);
+    background-color: transparent;
   }
 
   .fds-btn--secondary:where(.fds-btn--accent):not([aria-disabled='true'], :disabled):active {
-    color: var(--ds-color-accent-base-active);
-    border-color: var(--ds-color-accent-base-active);
+    color: var(--ds-color-accent-text-default);
+    border-color: var(--ds-color-accent-border-strong);
     background-color: var(--ds-color-accent-surface-hover);
   }
 
   .fds-btn--secondary:where(.fds-btn--neutral):not([aria-disabled='true'], :disabled):active {
-    color: var(--ds-color-neutral-base-active);
-    border-color: var(--ds-color-neutral-base-active);
+    color: var(--ds-color-neutral-text-default);
+    border-color: var(--ds-color-neutral-border-strong);
     background-color: var(--ds-color-neutral-surface-hover);
   }
 
-  .fds-btn--secondary:where(.fds-btn--success):not([aria-disabled='true'], :disabled):active {
-    color: var(--ds-color-success-base-default);
-    border-color: var([delete]);
-    background-color: var(--ds-color-success-surface-hover);
-  }
-
   .fds-btn--secondary:where(.fds-btn--danger):not([aria-disabled='true'], :disabled):active {
     color: var(--ds-color-danger-text-default);
     border-color: var(--ds-color-danger-border-strong);
@@ -235,15 +200,11 @@
 
   /* Tertiary button colors */
   .fds-btn--tertiary:where(.fds-btn--accent) {
-    color: var(--ds-color-accent-base-default);
+    color: var(--ds-color-accent-text-subtle);
   }
 
   .fds-btn--tertiary:where(.fds-btn--neutral) {
-    color: var(--ds-color-neutral-base-default);
-  }
-
-  .fds-btn--tertiary:where(.fds-btn--success) {
-    color: var(--ds-color-success-base-default);
+    color: var(--ds-color-neutral-text-subtle);
   }
 
   .fds-btn--tertiary:where(.fds-btn--danger) {
@@ -251,20 +212,15 @@
   }
 
   .fds-btn--tertiary:where(.fds-btn--accent):not([aria-disabled='true'], :disabled):active {
-    color: var(--ds-color-accent-base-active);
+    color: var(--ds-color-accent-text-default);
     background-color: var(--ds-color-accent-surface-hover);
   }
 
   .fds-btn--tertiary:where(.fds-btn--neutral):not([aria-disabled='true'], :disabled):active {
-    color: var(--ds-color-neutral-base-active);
+    color: var(--ds-color-neutral-text-default);
     background-color: var(--ds-color-neutral-surface-hover);
   }
 
-  .fds-btn--tertiary:where(.fds-btn--success):not([aria-disabled='true'], :disabled):active {
-    color: var(--ds-color-success-base-default);
-    background-color: var(--ds-color-success-surface-hover);
-  }
-
   .fds-btn--tertiary:where(.fds-btn--danger):not([aria-disabled='true'], :disabled):active {
     color: var(--ds-color-danger-text-default);
     background-color: var(--ds-color-danger-surface-hover);

package/card.css

@@ -1,42 +1,7 @@
-@layer fds.card {
-  .fds-card__media {
-    width: auto;
-  }
-
-  .fds-card__media > * {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    border: 0;
-  }
-
-  .fds-card__footer,
-  .fds-card__content {
-    display: flex;
-    justify-content: flex-start;
-    gap: var(--ds-spacing-4);
-    flex-wrap: wrap;
-    word-wrap: break-word;
-    font: var(--ds-typography-paragraph-md);
-    font-family: inherit;
-    padding: var(--ds-spacing-2) 0;
-  }
-
-  .fds-card__content {
-    flex-direction: column;
-  }
-
-  .fds-card__header {
-    display: flex;
-    flex-direction: column;
-    flex-wrap: wrap;
-    word-wrap: break-word;
-    font: var(--ds-typography-heading-md);
-    font-family: inherit;
-    padding: var(--ds-spacing-2) 0;
-  }
-
+@layer ds.card {
   .fds-card {
+    --dsc-card-border-color: var(--ds-color-neutral-border-subtle);
+
     display: flex;
     flex-direction: column;
     width: 100%;
@@ -45,6 +10,7 @@
     overflow: hidden;
     color: var(--ds-color-neutral-text-default);
     border-radius: var(--ds-border-radius-md);
+    border: 1px solid var(--dsc-card-border-color);
   }
 
   .fds-card a,
@@ -57,6 +23,17 @@
     margin: var(--ds-spacing-3) 0;
   }
 
+  .fds-card__media {
+    width: auto;
+  }
+
+  .fds-card__media > * {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    border: 0;
+  }
+
   .fds-card > *:not(.fds-card__media, hr) {
     padding-left: var(--ds-spacing-6);
     padding-right: var(--ds-spacing-6);
@@ -79,9 +56,37 @@
   }
 
   .fds-card--link {
+    --dsc-card-border-color: var(--ds-color-neutral-border-default);
+
     text-decoration: none;
   }
 
+  .fds-card__footer,
+  .fds-card__content {
+    display: flex;
+    justify-content: flex-start;
+    gap: var(--ds-spacing-4);
+    flex-wrap: wrap;
+    word-wrap: break-word;
+    font: var(--ds-typography-paragraph-md);
+    font-family: inherit;
+    padding: var(--ds-spacing-2) 0;
+  }
+
+  .fds-card__content {
+    flex-direction: column;
+  }
+
+  .fds-card__header {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    word-wrap: break-word;
+    font: var(--ds-typography-heading-md);
+    font-family: inherit;
+    padding: var(--ds-spacing-2) 0;
+  }
+
   .fds-card--link h1,
   .fds-card--link h2,
   .fds-card--link h3,
@@ -90,17 +95,27 @@
   .fds-card--link h6 {
     text-decoration: underline;
     text-decoration-thickness: max(1px, 0.0625rem, 0.1025em);
-    text-underline-offset: max(4px, 0.25rem, 0.22em);
+    text-underline-offset: max(6px, 0.25rem, 0.22em);
   }
 
   .fds-card--neutral {
+    --dsc-card-border-color: var(--ds-color-neutral-border-subtle);
+
     background-color: var(--ds-color-neutral-background-default);
-    border: 1px solid var(--ds-color-neutral-border-subtle);
+  }
+
+  .fds-card--neutral.fds-card--link:hover {
+    --dsc-card-border-color: var(--ds-color-neutral-border-default);
   }
 
   .fds-card--subtle {
+    --dsc-card-border-color: var(--ds-color-neutral-border-subtle);
+
     background-color: var(--ds-color-neutral-background-subtle);
-    border: 1px solid var(--ds-color-neutral-border-subtle);
+  }
+
+  .fds-card--subtle.fds-card--link:hover {
+    --dsc-card-border-color: var(--ds-color-neutral-border-default);
   }
 
   .fds-card--neutral.fds-card--link:hover,
@@ -109,8 +124,13 @@
   }
 
   .fds-card--brand1 {
+    --dsc-card-border-color: var(--ds-color-brand1-border-subtle);
+
     background-color: var(--ds-color-brand1-surface-default);
-    border: 1px solid var(--ds-color-neutral-border-subtle);
+  }
+
+  .fds-card--brand1.fds-card--link {
+    --dsc-card-border-color: var(--ds-color-brand1-border-default);
   }
 
   .fds-card--brand1.fds-card--link:hover {
@@ -122,8 +142,13 @@
   }
 
   .fds-card--brand2 {
+    --dsc-card-border-color: var(--ds-color-brand2-border-subtle);
+
     background-color: var(--ds-color-brand2-surface-default);
-    border: 1px solid var(--ds-color-neutral-border-subtle);
+  }
+
+  .fds-card--brand2.fds-card--link {
+    --dsc-card-border-color: var(--ds-color-brand2-border-default);
   }
 
   .fds-card--brand2.fds-card--link:hover {
@@ -135,8 +160,13 @@
   }
 
   .fds-card--brand3 {
+    --dsc-card-border-color: var(--ds-color-brand3-border-subtle);
+
     background-color: var(--ds-color-brand3-surface-default);
-    border: 1px solid var(--ds-color-neutral-border-subtle);
+  }
+
+  .fds-card--brand3.fds-card--link {
+    --dsc-card-border-color: var(--ds-color-brand3-border-default);
   }
 
   .fds-card--brand3.fds-card--link:hover {

package/checkbox.css

@@ -1,13 +1,12 @@
-@layer fds.checkbox {
+@layer ds.checkbox {
   .fds-checkbox {
     --dsc-checkbox-size: 1.75rem;
     --dsc-checkbox-focus-border-width: 3px;
     --dsc-checkbox-background: var(--ds-color-neutral-background-default);
-    --dsc-checkbox-border-color: var(--ds-color-neutral-border-default);
+    --dsc-checkbox-border-color: var(--ds-color-neutral-border-strong);
     --dsc-checkbox-border__hover--size: calc(var(--ds-spacing-3) / 2);
     --dsc-checkbox-border__hover: 0 0 0 var(--dsc-checkbox-border__hover--size) var(--ds-color-accent-surface-hover);
     --dsc-checkbox-check_color: transparent;
-    --dsc-checkbox-focus-color: var(--ds-color-neutral-text-default);
 
     display: grid;
   }
@@ -62,29 +61,23 @@
     grid-column: 2;
   }
 
-  .fds-checkbox--disabled > .fds-checkbox__input,
-  .fds-checkbox--disabled > .fds-checkbox__label,
-  .fds-checkbox--disabled > .fds-checkbox__input::before {
-    cursor: not-allowed;
-  }
-
-  .fds-checkbox--disabled > .fds-checkbox__label,
-  .fds-checkbox--disabled > .fds-checkbox__input,
-  .fds-checkbox--disabled > .fds-checkbox__description {
-    opacity: var(--ds-opacity-disabled);
-  }
-
   .fds-checkbox--readonly > .fds-checkbox__label,
   .fds-checkbox--readonly > .fds-checkbox__input,
   .fds-checkbox--readonly > .fds-checkbox__input::before {
     cursor: default;
   }
 
+  .fds-checkbox__input:disabled,
+  .fds-checkbox__input:disabled ~ .fds-checkbox__label,
+  .fds-checkbox__input:disabled::before {
+    cursor: not-allowed;
+  }
+
   .fds-checkbox__input:focus-visible {
     outline-offset: 3px;
-    outline: var(--dsc-checkbox-focus-border-width) solid var(--dsc-checkbox-focus-color);
+    outline: var(--dsc-checkbox-focus-border-width) solid var(--ds-focus-outer);
     box-shadow:
-      0 0 0 var(--dsc-checkbox-focus-border-width) var(--ds-color-neutral-background-default),
+      0 0 0 var(--dsc-checkbox-focus-border-width) var(--ds-focus-inner),
       inset 0 0 0 2px var(--dsc-checkbox-border-color);
   }
 
@@ -102,16 +95,18 @@
 
   .fds-checkbox__input:checked {
     --dsc-checkbox-border-color: var(--ds-color-accent-base-default);
+    --dsc-checkbox-background: var(--ds-color-accent-base-default);
     --dsc-checkbox-check_color: white;
 
-    background: var(--dsc-checkbox-border-color);
+    background: var(--dsc-checkbox-background);
   }
 
   .fds-checkbox__input:indeterminate {
     --dsc-checkbox-border-color: var(--ds-color-accent-border-strong);
+    --dsc-checkbox-background: var(--ds-color-accent-border-strong);
     --dsc-checkbox-check_color: white;
 
-    background-color: var(--dsc-checkbox-border-color);
+    background-color: var(--dsc-checkbox-background);
     background-repeat: no-repeat;
   }
 
@@ -120,6 +115,12 @@
     --dsc-checkbox-background: var(--ds-color-neutral-background-subtle);
   }
 
+  .fds-checkbox__input:disabled,
+  .fds-checkbox__input:disabled ~ .fds-checkbox__label,
+  .fds-checkbox__input:disabled ~ .fds-checkbox__description {
+    opacity: var(--ds-disabled-opacity);
+  }
+
   .fds-checkbox__input:checked:not(:focus-visible) {
     box-shadow: inset 0 0 0 2px var(--dsc-checkbox-border-color);
   }
@@ -143,12 +144,12 @@
   /* Only use hover for non-touch devices to prevent sticky-hovering
     "input:not(:read-only)" does not work so using ".container:not(.readonly) >" instead */
   @media (hover: hover) and (pointer: fine) {
-    .fds-checkbox:not(.fds-checkbox--readonly, .fds-checkbox--disabled) > .fds-checkbox__label:hover,
-    .fds-checkbox:not(.fds-checkbox--readonly, .fds-checkbox--disabled) > .fds-checkbox__input:hover + .fds-checkbox__label {
-      color: var(--ds-color-accent-base-hover);
+    .fds-checkbox:not(.fds-checkbox--readonly) .fds-checkbox__input:not(:disabled) ~ .fds-checkbox__label:hover,
+    .fds-checkbox:not(.fds-checkbox--readonly) .fds-checkbox__input:hover:not(:disabled) ~ .fds-checkbox__label {
+      color: var(--ds-color-accent-text-subtle);
     }
 
-    .fds-checkbox:not(.fds-checkbox--readonly, .fds-checkbox--disabled) > .fds-checkbox__input:hover:not(:checked) {
+    .fds-checkbox:not(.fds-checkbox--readonly) .fds-checkbox__input:hover:not(:checked, :disabled) {
       --dsc-checkbox-border-color: var(--ds-color-accent-border-strong);
 
       box-shadow:
@@ -156,12 +157,8 @@
         inset 0 0 0 2px var(--dsc-checkbox-border-color);
     }
 
-    .fds-checkbox:not(.fds-checkbox--readonly, .fds-checkbox--disabled) > .fds-checkbox__input:hover:checked {
-      --dsc-checkbox-border-color: var(--ds-color-accent-border-strong);
-
-      box-shadow:
-        var(--dsc-checkbox-border__hover),
-        inset 0 0 0 2px var(--dsc-checkbox-border-color);
+    .fds-checkbox:not(.fds-checkbox--readonly) .fds-checkbox__input:hover:checked:focus-visible:not(:disabled) {
+      box-shadow: var(--dsc-checkbox-border__hover);
     }
   }
 

package/chip.css

@@ -1,4 +1,4 @@
-@layer fds.chip {
+@layer ds.chip {
   /*
   The class is unused. There is no root chip component?
   .chip {
@@ -29,7 +29,7 @@
   .fds-chip--button:disabled,
   .fds-chip--button[aria-disabled='true'] {
     cursor: not-allowed;
-    opacity: var(--ds-opacity-disabled);
+    opacity: var(--ds-disabled-opacity);
   }
 
   .fds-chip--button .fds-chip__label {

package/combobox.css

@@ -1,13 +1,19 @@
-@layer fds.combobox {
+@layer ds.combobox {
   .fds-combobox {
     display: grid;
     background-color: transparent;
     gap: var(--ds-spacing-2);
   }
 
+  .fds-combobox [data-floating-ui-portal] {
+    grid-column: 1 / 2;
+    grid-row: 1 / 2;
+  }
+
   .fds-combobox__options-wrapper {
     padding: var(--ds-spacing-2);
     background: var(--ds-color-neutral-background-default);
+    color: var(--ds-color-neutral-text-default);
     overflow-y: auto;
     z-index: 1600;
   }
@@ -37,6 +43,7 @@
     appearance: none;
     border: none;
     background-color: transparent;
+    color: var(--ds-color-neutral-text-default);
   }
 
   .fds-combobox--sm .fds-combobox__input__wrapper {
@@ -105,6 +112,8 @@
   }
 
   .fds-combobox__label {
+    grid-column: 1 / 2;
+    grid-row: 1 / 2;
     min-width: min-content;
     display: inline-flex;
     flex-direction: row;
@@ -147,11 +156,11 @@
   }
 
   .fds-combobox__clear-button:not(:disabled):hover {
-    background-color: var([delete]);
+    background-color: var(--ds-color-neutral-surface-default);
   }
 
   .fds-combobox__disabled {
-    opacity: var(--ds-opacity-disabled);
+    opacity: var(--ds-disabled-opacity);
   }
 
   .fds-combobox__disabled * {
@@ -188,6 +197,10 @@
     box-shadow: 0 0 0 var(--dsc-focus-border-width) var(--ds-color-neutral-background-default) !important;
   }
 
+  .fds-combobox__input__wrapper:focus-within:hover {
+    border-color: var(--ds-color-neutral-border-default);
+  }
+
   .fds-combobox__empty {
     padding: var(--ds-spacing-2) var(--ds-spacing-3);
   }
@@ -283,7 +296,7 @@
     aspect-ratio: 1 / 1;
     border: 2px solid var(--ds-color-neutral-border-default);
     border-radius: var(--ds-border-radius-md);
-    background-color: white;
+    background-color: var(--ds-color-neutral-background-default);
     display: grid;
     place-items: center;
   }