@digdir/designsystemet-css 0.9.0 → 0.9.1-alpha.0

package/radio.css

@@ -1,32 +1,34 @@
 @layer fds.radio {
   .fds-radio {
-    --fds-radio-size: 1.75rem;
-    --fds-radio-focus-border-width: 3px;
-    --fds-radio-background: var(--fds-semantic-background-default);
-    --fds-radio-border-color: var(--fds-semantic-border-input-default);
-    --fds-radio-border__hover: 0 0 0 var(--fds-spacing-2) var(--fds-semantic-surface-info-subtle-hover);
+    --dsc-radio-size: var(--ds-spacing-5);
+    --dsc-radio-focus-border-width: 3px;
+    --dsc-radio-background: var(--ds-color-neutral-background-default);
+    --dsc-radio-border-color: var(--ds-color-neutral-border-default);
+    --dsc-radio-border__hover--size: calc(var(--ds-spacing-3) / 2);
+    --dsc-radio-border__hover: 0 0 0 var(--dsc-radio-border__hover--size) var(--ds-color-accent-border-subtle);
+    --dsc-radio-focus-color: var(--ds-color-neutral-text-default);
 
     display: grid;
   }
 
   .fds-radio:has(.fds-radio__label) {
-    grid-template-columns: var(--fds-radio-size) auto;
-    gap: var(--fds-spacing-2);
+    grid-template-columns: var(--dsc-radio-size) auto;
+    gap: var(--ds-spacing-2);
   }
 
   /* Radio */
   .fds-radio__input {
     position: relative;
-    width: var(--fds-radio-size);
-    height: var(--fds-radio-size);
+    width: var(--dsc-radio-size);
+    height: var(--dsc-radio-size);
     z-index: 1;
     appearance: none;
     outline: none;
     cursor: pointer;
     margin: 0;
     align-self: center;
-    box-shadow: inset 0 0 0 2px var(--fds-radio-border-color);
-    background: var(--fds-radio-background);
+    box-shadow: inset 0 0 0 2px var(--dsc-radio-border-color);
+    background: var(--dsc-radio-background);
     border-radius: 50%;
   }
 
@@ -40,22 +42,22 @@
     top: 50%;
     left: 50%;
     cursor: pointer;
-    border-radius: var(--fds-border_radius-medium);
+    border-radius: var(--ds-border-radius-md);
   }
 
   .fds-radio__label {
-    min-height: var(--fds-sizing-10);
+    min-height: var(--ds-sizing-10);
     min-width: min-content;
     display: inline-flex;
     flex-direction: row;
-    gap: var(--fds-spacing-1);
+    gap: var(--ds-spacing-1);
     align-items: center;
     cursor: pointer;
   }
 
   .fds-radio__description {
-    margin-top: calc(var(--fds-spacing-3) * -1);
-    color: var(--fds-semantic-text-neutral-subtle);
+    margin-top: calc(var(--ds-spacing-3) * -1);
+    color: var(--ds-color-neutral-text-subtle);
     grid-column: 2;
   }
 
@@ -68,7 +70,7 @@
   .fds-radio--disabled > .fds-radio__label,
   .fds-radio--disabled > .fds-radio__input,
   .fds-radio--disabled > .fds-radio__description {
-    opacity: var(--fds-opacity-disabled);
+    opacity: var(--ds-opacity-disabled);
   }
 
   .fds-radio--readonly > .fds-radio__input,
@@ -78,36 +80,37 @@
   }
 
   .fds-radio__input:focus-visible {
-    outline-offset: 0;
-    outline: var(--fds-radio-focus-border-width) solid var(--fds-semantic-border-focus-outline);
+    outline-offset: var(--ds-spacing-1);
+    outline: var(--dsc-radio-focus-border-width) solid var(--dsc-radio-focus-color);
     box-shadow:
-      inset 0 0 0 var(--fds-radio-focus-border-width) var(--fds-semantic-border-focus-boxshadow),
-      inset 0 0 0 6px var(--fds-radio-background);
+      inset 0 0 0 2px var(--dsc-radio-border-color),
+      inset 0 0 0 var(--dsc-radio-focus-border-width) var(--ds-color-neutral-background-default),
+      inset 0 0 0 6px var(--dsc-radio-background);
   }
 
   .fds-radio__input:checked {
-    --fds-radio-border-color: var(--fds-semantic-border-input-hover);
+    --dsc-radio-border-color: var(--ds-color-accent-border-strong);
 
-    background: var(--fds-radio-border-color);
+    background: var(--dsc-radio-border-color);
   }
 
   .fds-radio--readonly > .fds-radio__input {
-    --fds-radio-border-color: var(--fds-semantic-border-neutral-subtle);
-    --fds-radio-background: var(--fds-semantic-surface-neutral-subtle);
+    --dsc-radio-border-color: var(--ds-color-neutral-border-subtle);
+    --dsc-radio-background: var(--ds-color-neutral-background-subtle);
   }
 
   .fds-radio__input:checked:not(:focus-visible) {
     box-shadow:
-      inset 0 0 0 2px var(--fds-radio-border-color),
-      inset 0 0 0 6px var(--fds-radio-background);
+      inset 0 0 0 2px var(--dsc-radio-border-color),
+      inset 0 0 0 6px var(--dsc-radio-background);
   }
 
   .fds-radio--readonly > .fds-radio__input:checked {
-    background: var(--fds-semantic-border-neutral-default);
+    background: var(--ds-color-neutral-border-strong);
   }
 
   .fds-radio--error > .fds-radio__input:not(:disabled, :focus-visible) {
-    --fds-radio-border-color: var(--fds-semantic-border-danger-default);
+    --dsc-radio-border-color: var(--ds-color-danger-border-default);
   }
 
   /* Only use hover for non-touch devices to prevent sticky-hovering
@@ -115,57 +118,51 @@
   @media (hover: hover) and (pointer: fine) {
     .fds-radio:not(.fds-radio--readonly, .fds-radio--disabled) > .fds-radio__label:hover,
     .fds-radio:not(.fds-radio--readonly, .fds-radio--disabled) > .fds-radio__input:hover + .fds-radio__label {
-      color: var(--fds-semantic-text-action-hover);
+      color: var(--ds-color-accent-text-subtle);
     }
 
     .fds-radio:not(.fds-radio--readonly, .fds-radio--disabled) > .fds-radio__input:hover:not(:checked) {
-      --fds-radio-border-color: var(--fds-semantic-border-input-hover);
+      --dsc-radio-border-color: var(--ds-color-accent-border-strong);
 
       box-shadow:
-        var(--fds-radio-border__hover),
-        inset 0 0 0 2px var(--fds-radio-border-color);
+        var(--dsc-radio-border__hover),
+        inset 0 0 0 2px var(--dsc-radio-border-color);
     }
 
     .fds-radio:not(.fds-radio--readonly, .fds-radio--disabled) > .fds-radio__input:hover:checked {
-      --fds-radio-border-color: var(--fds-semantic-border-input-hover);
+      --dsc-radio-border-color: var(--ds-color-accent-border-strong);
 
       box-shadow:
-        var(--fds-radio-border__hover),
-        inset 0 0 0 2px var(--fds-radio-border-color),
-        inset 0 0 0 6px var(--fds-radio-background);
-    }
-
-    .fds-radio:not(.fds-radio--readonly, .fds-radio--disabled) > .fds-radio__input:hover:checked:focus-visible {
-      box-shadow:
-        var(--fds-radio-border__hover),
-        inset 0 0 0 var(--fds-radio-focus-border-width) var(--fds-semantic-border-focus-boxshadow),
-        inset 0 0 0 6px var(--fds-radio-background);
+        var(--dsc-radio-border__hover),
+        inset 0 0 0 2px var(--dsc-radio-border-color),
+        inset 0 0 0 6px var(--dsc-radio-background);
     }
   }
 
   /** Sizing */
 
   .fds-radio--sm {
-    --fds-radio-size: var(--fds-sizing-5);
+    --dsc-radio-size: var(--ds-sizing-5);
 
-    min-height: var(--fds-sizing-10);
+    min-height: var(--ds-sizing-10);
   }
 
   .fds-radio--md {
-    --fds-radio-size: var(--fds-sizing-6);
+    --dsc-radio-size: var(--ds-sizing-6);
+    --dsc-radio-border__hover--size: var(--ds-spacing-1);
 
-    min-height: var(--fds-sizing-11);
+    min-height: var(--ds-sizing-11);
   }
 
   .fds-radio--lg {
-    --fds-radio-size: var(--fds-sizing-7);
+    --dsc-radio-size: var(--ds-sizing-7);
 
-    min-height: var(--fds-sizing-12);
+    min-height: var(--ds-sizing-12);
   }
 
   .fds-radio-group--horizontal {
     display: flex;
     flex-direction: row;
-    gap: var(--fds-spacing-6);
+    gap: var(--ds-spacing-6);
   }
 }

package/search.css

@@ -2,19 +2,19 @@
   .fds-search {
     display: inline-grid;
     width: 100%;
-    gap: var(--fds-spacing-2);
+    gap: var(--ds-spacing-2);
   }
 
   .fds-search--sm {
-    --f-search-button-clear-size: var(--fds-sizing-5);
+    --dsc-search-button-clear-size: var(--ds-sizing-5);
   }
 
   .fds-search--md {
-    --f-search-button-clear-size: var(--fds-sizing-6);
+    --dsc-search-button-clear-size: var(--ds-sizing-6);
   }
 
   .fds-search--lg {
-    --f-search-button-clear-size: var(--fds-sizing-8);
+    --dsc-search-button-clear-size: var(--ds-sizing-8);
   }
 
   .fds-search__error:empty {
@@ -25,7 +25,7 @@
     min-width: min-content;
     display: inline-flex;
     flex-direction: row;
-    gap: var(--fds-spacing-1);
+    gap: var(--ds-spacing-1);
     align-items: center;
   }
 
@@ -33,7 +33,7 @@
     display: flex;
     width: 100%;
     align-items: stretch;
-    border-radius: var(--fds-border_radius-medium);
+    border-radius: var(--ds-border-radius-md);
     position: relative;
   }
 
@@ -41,7 +41,7 @@
     position: absolute;
     height: 100%;
     z-index: 2;
-    left: var(--fds-spacing-4);
+    left: var(--ds-spacing-4);
     transform: scale(1.5);
     pointer-events: none;
   }
@@ -57,12 +57,12 @@
     position: relative;
     box-sizing: border-box;
     flex: 0 1 auto;
-    height: var(--fds-sizing-10);
+    height: var(--ds-sizing-10);
     width: 100%;
     appearance: none;
-    padding: 0 var(--fds-spacing-3);
-    border: solid 1px var(--fds-semantic-border-input-default);
-    border-radius: var(--fds-border_radius-medium);
+    padding: 0 var(--ds-spacing-3);
+    border: solid 1px var(--ds-color-neutral-border-default);
+    border-radius: var(--ds-border-radius-md);
   }
 
   .fds-search__input.fds-search__input--with-search-button {
@@ -79,7 +79,7 @@
   }
 
   .fds-search--disabled {
-    opacity: var(--fds-opacity-disabled);
+    opacity: var(--ds-opacity-disabled);
   }
 
   .fds-search__search-button {
@@ -93,7 +93,7 @@
   }
 
   .fds-search__clear-button {
-    color: var(--fds-semantic-text-neutral-default);
+    color: var(--ds-color-neutral-text-default);
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -104,48 +104,48 @@
     top: 50%;
     transform: translateY(-50%);
     cursor: pointer;
-    height: var(--f-search-button-clear-size);
-    width: var(--f-search-button-clear-size);
-    border-radius: var(--fds-border_radius-medium);
+    height: var(--dsc-search-button-clear-size);
+    width: var(--dsc-search-button-clear-size);
+    border-radius: var(--ds-border-radius-md);
     font-size: 1.25rem;
     padding: 0;
     z-index: 2;
   }
 
   .fds-search--sm .fds-search__input {
-    --f-search-button-clear-size: var(--fds-sizing-4);
+    --dsc-search-button-clear-size: var(--ds-sizing-4);
 
-    height: var(--fds-sizing-10);
-    padding: 0 var(--fds-spacing-3);
+    height: var(--ds-sizing-10);
+    padding: 0 var(--ds-spacing-3);
     padding-right: 2.5em;
   }
 
   .fds-search--sm .fds-search__icon {
-    left: var(--fds-spacing-3);
+    left: var(--ds-spacing-3);
   }
 
   .fds-search--md .fds-search__input {
-    --f-search-button-clear-size: var(--fds-sizing-6);
+    --dsc-search-button-clear-size: var(--ds-sizing-6);
 
-    height: var(--fds-sizing-12);
-    padding: 0 var(--fds-spacing-4);
+    height: var(--ds-sizing-12);
+    padding: 0 var(--ds-spacing-4);
     padding-right: 2.2em;
   }
 
   .fds-search--md .fds-search__icon {
-    left: var(--fds-spacing-4);
+    left: var(--ds-spacing-4);
   }
 
   .fds-search--lg .fds-search__input {
-    --f-search-button-clear-size: var(--fds-sizing-12);
+    --dsc-search-button-clear-size: var(--ds-sizing-12);
 
-    height: var(--fds-sizing-14);
-    padding: 0 var(--fds-spacing-5);
+    height: var(--ds-sizing-14);
+    padding: 0 var(--ds-spacing-5);
     padding-right: 2em;
   }
 
   .fds-search--lg .fds-search__icon {
-    left: var(--fds-spacing-5);
+    left: var(--ds-spacing-5);
   }
 
   .fds-search__input.fds-search__input--simple {
@@ -153,18 +153,18 @@
   }
 
   .fds-search__error-message > .input:not(:focus-visible) {
-    border-color: var(--fds-semantic-border-danger-default);
-    box-shadow: inset 0 0 0 1px var(--fds-semantic-border-danger-default);
+    border-color: var(--ds-color-danger-border-default);
+    box-shadow: inset 0 0 0 1px var(--ds-color-danger-border-default);
   }
 
   @media (hover: hover) and (pointer: fine) {
     .fds-search__input:not(:focus-visible, :disabled, [aria-disabled]):hover {
-      border-color: var(--fds-semantic-border-input-hover);
-      box-shadow: inset 0 0 0 1px var(--fds-semantic-border-input-hover);
+      border-color: var(--ds-color-accent-border-strong);
+      box-shadow: inset 0 0 0 1px var(--ds-color-accent-border-strong);
     }
 
     .fds-search__clear-button:not(:focus-visible, :disabled, [aria-disabled]):hover {
-      background: var(--fds-semantic-surface-action-subtle-hover);
+      background: var(--ds-color-accent-surface-hover);
     }
   }
 }

package/skeleton.css

@@ -1,12 +1,12 @@
 @layer fds.skeleton {
   .fds-skeleton {
-    --fds-skeleton-animation-duration: 0.8s;
+    --dsc-skeleton-animation-duration: 0.8s;
 
     height: 1.3em;
     pointer-events: none;
     user-select: none;
-    background-color: var(--fds-semantic-surface-neutral-subtle-hover);
-    animation: fds-skeleton-opacity-fade var(--fds-skeleton-animation-duration) linear infinite alternate;
+    background-color: var(--ds-color-neutral-surface-default);
+    animation: fds-skeleton-opacity-fade var(--dsc-skeleton-animation-duration) linear infinite alternate;
   }
 
   .fds-skeleton--circle {
@@ -43,7 +43,7 @@
 
   @media (prefers-reduced-motion: reduce) {
     .fds-skeleton {
-      --fds-skeleton-animation-duration: 1.6s;
+      --dsc-skeleton-animation-duration: 1.6s;
     }
   }
 

package/skiplink.css

@@ -13,8 +13,8 @@
     text-decoration: underline;
     text-decoration-thickness: 3px;
     text-underline-offset: 0.3em;
-    padding: var(--fds-spacing-3) var(--fds-spacing-4) var(--fds-spacing-3) var(--fds-spacing-6);
-    color: var(--fds-semantic-text-neutral-default);
-    background: var(--fds-semantic-border-focus-outline);
+    padding: var(--ds-spacing-3) var(--ds-spacing-4) var(--ds-spacing-3) var(--ds-spacing-6);
+    color: var(--ds-color-neutral-text-default);
+    background: var(--ds-color-neutral-text-default);
   }
 }

package/spinner.css

@@ -25,23 +25,23 @@
   }
 
   .fds-spinner--default .fds-spinner__circle {
-    stroke: var(--fds-semantic-border-neutral-default);
+    stroke: var(--ds-color-neutral-border-strong);
   }
 
   .fds-spinner--interaction .fds-spinner__circle {
-    stroke: var(--fds-semantic-border-action-first-default);
+    stroke: var(--ds-color-accent-base-default);
   }
 
   .fds-spinner--inverted .fds-spinner__circle {
-    stroke: var(--fds-semantic-surface-neutral-default);
+    stroke: var(--ds-color-neutral-background-default);
   }
 
   .fds-spinner__background {
-    stroke: var(--fds-semantic-border-neutral-subtle);
+    stroke: var(--ds-color-neutral-border-subtle);
   }
 
   .fds-spinner__background--inverted {
-    stroke: var(--fds-semantic-surface-neutral-dark);
+    stroke: var([delete]);
   }
 
   @keyframes fds-spinner-rotate-animation {

package/switch.css

@@ -1,24 +1,25 @@
 @layer fds.switch {
   .fds-switch {
-    --fds-switch--transition: 200ms;
-    --fds-switch-height: 1.75rem;
-    --fds-switch-focus-border-width: 3px;
+    --dsc-switch--transition: 200ms;
+    --dsc-switch-height: 1.75rem;
+    --dsc-switch-focus-border-width: 3px;
+    --dsc-switch-check_color: transparent;
 
     position: relative;
   }
 
   @media (prefers-reduced-motion) {
     .switch {
-      --fds-switch--transition: 0;
+      --dsc-switch--transition: 0;
     }
   }
 
   .fds-switch__label {
-    min-height: var(--fds-sizing-10);
+    min-height: var(--ds-sizing-10);
     min-width: min-content;
     display: grid;
     grid-template-columns: auto 1fr;
-    gap: var(--fds-spacing-1);
+    gap: var(--ds-spacing-1);
     align-items: center;
     cursor: pointer;
   }
@@ -27,20 +28,21 @@
     position: relative;
     display: inline-block;
     pointer-events: none;
-    width: var(--fds-switch-width);
-    height: var(--fds-switch-height);
+    width: var(--dsc-switch-width);
+    height: var(--dsc-switch-height);
     margin: auto;
     overflow: visible;
-    border-radius: var(--fds-border_radius-full);
-    background-color: var(--fds-semantic-surface-neutral-dark);
-    transition: background-color var(--fds-switch--transition) ease;
-    margin-right: var(--fds-spacing-1);
+    border-radius: var(--ds-border-radius-full);
+    background-color: var(--ds-color-neutral-border-default);
+    transition: background-color var(--dsc-switch--transition) ease;
+    margin-right: var(--ds-spacing-1);
   }
 
   .fds-switch__description {
-    padding-left: calc(var(--fds-switch-width) + var(--fds-spacing-2));
-    margin-top: calc(var(--fds-spacing-2) * -1);
-    color: var(--fds-semantic-text-neutral-subtle);
+    padding-left: calc(var(--dsc-switch-width) + var(--ds-spacing-2));
+    margin-top: var(--ds-spacing-1);
+    color: var(--ds-color-neutral-text-subtle);
+    width: fit-content;
   }
 
   .fds-switch__readonly__icon {
@@ -94,31 +96,31 @@
   .fds-switch--disabled > .fds-switch__label,
   .fds-switch--disabled > .fds-switch__track,
   .fds-switch--disabled > .fds-switch__description {
-    opacity: var(--fds-opacity-disabled);
+    opacity: var(--ds-opacity-disabled);
   }
 
   .fds-switch--readonly > .fds-switch__description {
-    margin-left: var(--fds-spacing-1);
+    margin-left: var(--ds-spacing-1);
   }
 
   .fds-switch--sm,
   .fds-switch--sm .fds-switch__label {
-    min-height: var(--fds-sizing-6);
+    min-height: var(--ds-sizing-6);
   }
 
   .fds-switch--md,
   .fds-switch--md .fds-switch__label {
-    min-height: var(--fds-sizing-7);
+    min-height: var(--ds-sizing-7);
   }
 
   .fds-switch--lg,
   .fds-switch--lg .fds-switch__label {
-    min-height: var(--fds-sizing-8);
+    min-height: var(--ds-sizing-8);
   }
 
   .fds-switch--sm {
-    --fds-switch-height: var(--fds-sizing-6);
-    --fds-switch-width: var(--fds-sizing-11);
+    --dsc-switch-height: var(--ds-sizing-6);
+    --dsc-switch-width: var(--ds-sizing-11);
   }
 
   .fds-switch--sm .fds-switch__input {
@@ -127,8 +129,8 @@
   }
 
   .fds-switch--md {
-    --fds-switch-height: var(--fds-sizing-7);
-    --fds-switch-width: var(--fds-sizing-13);
+    --dsc-switch-height: var(--ds-sizing-7);
+    --dsc-switch-width: var(--ds-sizing-13);
   }
 
   .fds-switch--md .fds-switch__input {
@@ -137,8 +139,8 @@
   }
 
   .fds-switch--lg {
-    --fds-switch-height: var(--fds-sizing-8);
-    --fds-switch-width: var(--fds-sizing-15);
+    --dsc-switch-height: var(--ds-sizing-8);
+    --dsc-switch-width: var(--ds-sizing-15);
   }
 
   .fds-switch--lg .fds-switch__input {
@@ -155,62 +157,76 @@
   }
 
   .fds-switch__input:focus-visible + .fds-switch__label .fds-switch__track {
-    outline: var(--fds-switch-focus-border-width) solid var(--fds-semantic-border-focus-outline);
-    box-shadow: inset 0 0 0 var(--fds-switch-focus-border-width) var(--fds-semantic-border-focus-boxshadow);
+    outline: var(--dsc-switch-focus-border-width) solid var(--ds-color-neutral-text-default);
+    outline-offset: 3px;
+    box-shadow: 0 0 0 var(--dsc-switch-focus-border-width) var(--ds-color-neutral-background-default);
   }
 
   .fds-switch__input:not([readonly]):checked + .fds-switch__label .fds-switch__track {
-    background-color: var(--fds-semantic-surface-success-default);
+    background-color: var(--ds-color-accent-base-default);
   }
 
   .fds-switch__thumb {
     scale: 0.8;
     position: absolute;
-    height: var(--fds-switch-height);
-    width: var(--fds-switch-height);
-    border-radius: var(--fds-border_radius-full);
-    background-color: var(--fds-semantic-background-default);
-    transition: transform var(--fds-switch--transition) ease;
+    height: var(--dsc-switch-height);
+    width: var(--dsc-switch-height);
+    border-radius: var(--ds-border-radius-full);
+    background-color: var(--ds-color-neutral-background-default);
+    transition: transform var(--dsc-switch--transition) ease;
   }
 
   .fds-switch__input:checked + .fds-switch__label .fds-switch__track .fds-switch__thumb {
-    transform: translateX(calc((var(--fds-switch-width) - var(--fds-switch-height)) * 1.2));
-    background-image: url("data:image/svg+xml,%3Csvg viewBox='-3 -3 17 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.1339 2.86612C10.622 3.35427 10.622 4.14573 10.1339 4.63388L5.88388 8.88388C5.39573 9.37204 4.60427 9.37204 4.11612 8.88388L1.86612 6.63388C1.37796 6.14573 1.37796 5.35427 1.86612 4.86612C2.35427 4.37796 3.14573 4.37796 3.63388 4.86612L5 6.23223L8.36612 2.86612C8.85427 2.37796 9.64573 2.37796 10.1339 2.86612Z' fill='%23118849' /%3E%3C/svg%3E");
+    --dsc-switch-check_color: var(--ds-color-accent-base-default);
+
+    transform: translateX(calc((var(--dsc-switch-width) - var(--dsc-switch-height)) * 1.2));
+  }
+
+  .fds-switch__thumb::after {
+    content: '';
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background-color: var(--dsc-switch-check_color);
+    mask-image: url("data:image/svg+xml,%3Csvg viewBox='-3 -3 17 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.1339 2.86612C10.622 3.35427 10.622 4.14573 10.1339 4.63388L5.88388 8.88388C5.39573 9.37204 4.60427 9.37204 4.11612 8.88388L1.86612 6.63388C1.37796 6.14573 1.37796 5.35427 1.86612 4.86612C2.35427 4.37796 3.14573 4.37796 3.63388 4.86612L5 6.23223L8.36612 2.86612C8.85427 2.37796 9.64573 2.37796 10.1339 2.86612Z' fill='%23118849' /%3E%3C/svg%3E");
+    transition: background-color var(--dsc-switch--transition) ease;
   }
 
   .fds-switch--readonly .fds-switch__input[readonly] + .fds-switch__label .fds-switch__track {
-    box-shadow: inset 0 0 0 2px var(--fds-semantic-border-neutral-subtle);
-    background-color: var(--fds-semantic-background-subtle);
+    box-shadow: inset 0 0 0 2px var(--ds-color-neutral-border-subtle);
+    background-color: var(--ds-color-neutral-background-subtle);
   }
 
   .fds-switch--readonly .fds-switch__input[readonly] + .fds-switch__label .fds-switch__track > .fds-switch__thumb {
-    background-color: var(--fds-semantic-border-neutral-default);
-  }
+    --dsc-switch-check_color: var(--ds-color-neutral-background-subtle);
 
-  .fds-switch--readonly .fds-switch__input[readonly]:checked + .fds-switch__label .fds-switch__track .fds-switch__thumb {
-    background-image: url("data:image/svg+xml,%3Csvg viewBox='-3 -3 17 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.1339 2.86612C10.622 3.35427 10.622 4.14573 10.1339 4.63388L5.88388 8.88388C5.39573 9.37204 4.60427 9.37204 4.11612 8.88388L1.86612 6.63388C1.37796 6.14573 1.37796 5.35427 1.86612 4.86612C2.35427 4.37796 3.14573 4.37796 3.63388 4.86612L5 6.23223L8.36612 2.86612C8.85427 2.37796 9.64573 2.37796 10.1339 2.86612Z' fill='%23f4f5f6' /%3E%3C/svg%3E");
+    background-color: var(--ds-color-neutral-border-strong);
   }
 
   @media (hover: hover) and (pointer: fine) {
     .fds-switch__input:not([readonly], :disabled):hover + .fds-switch__label .fds-switch__track > .fds-switch__thumb {
-      transform: translateX(calc((var(--fds-switch-width) - var(--fds-switch-height)) * 0.2));
+      transform: translateX(calc((var(--dsc-switch-width) - var(--dsc-switch-height)) * 0.2));
     }
 
     .fds-switch__input:not([readonly], :disabled):hover + .fds-switch__label {
-      color: var(--fds-semantic-border-input-hover);
+      color: var(--ds-color-accent-border-strong);
     }
 
     .fds-switch__input:not(:disabled, [readonly]):checked:hover + .fds-switch__label .fds-switch__track > .fds-switch__thumb {
-      transform: translateX(calc((var(--fds-switch-width) - var(--fds-switch-height))));
-      background-image: url("data:image/svg+xml,%3Csvg viewBox='-3 -3 17 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.1339 2.86612C10.622 3.35427 10.622 4.14573 10.1339 4.63388L5.88388 8.88388C5.39573 9.37204 4.60427 9.37204 4.11612 8.88388L1.86612 6.63388C1.37796 6.14573 1.37796 5.35427 1.86612 4.86612C2.35427 4.37796 3.14573 4.37796 3.63388 4.86612L5 6.23223L8.36612 2.86612C8.85427 2.37796 9.64573 2.37796 10.1339 2.86612Z' fill='%230c6536' /%3E%3C/svg%3E");
+      --dsc-switch-check_color: var(--ds-color-accent-base-hover);
+
+      transform: translateX(calc((var(--dsc-switch-width) - var(--dsc-switch-height))));
     }
 
-    .fds-switch__input:not(:checked, :disabled, [readonly]):hover + .fds-switch__label .fds-switch__track {
-      background-color: var(--fds-semantic-surface-neutral-dark-hover);
+    .input:not(:checked, :disabled, [readonly]):hover + .label .track {
+      background-color: var([delete]);
     }
 
     .fds-switch__input:not(:disabled, [readonly]):checked:hover + .fds-switch__label .fds-switch__track {
-      background-color: var(--fds-semantic-surface-success-hover);
+      background-color: var(--ds-color-accent-base-hover);
     }
   }
 }