@digdir/designsystemet-css 0.10.0 → 0.11.0-alpha.2

package/spinner.css

@@ -1,13 +1,13 @@
-@layer fds.spinner {
-  .fds-spinner {
-    animation: fds-spinner-rotate-animation linear infinite;
+@layer ds.spinner {
+  .ds-spinner {
+    animation: ds-spinner-rotate-animation linear infinite;
     animation-duration: 2s;
   }
 
-  .fds-spinner__circle {
+  .ds-spinner__circle {
     stroke-dasharray: 1px, 200px;
     transform-origin: center;
-    animation: fds-spinner-stroke-animation ease-in-out infinite;
+    animation: ds-spinner-stroke-animation ease-in-out infinite;
     animation-duration: 2s;
   }
 
@@ -15,36 +15,28 @@
     but don't remove it since it is not decorative.
    */
   @media (prefers-reduced-motion: reduce) {
-    .fds-spinner {
+    .ds-spinner {
       animation-duration: 6s;
     }
 
-    .fds-spinner__circle {
+    .ds-spinner__circle {
       animation-duration: 6s;
     }
   }
 
-  .fds-spinner--default .fds-spinner__circle {
-    stroke: var(--fds-semantic-border-neutral-default);
+  .ds-spinner--neutral .ds-spinner__circle {
+    stroke: var(--ds-color-neutral-border-default);
   }
 
-  .fds-spinner--interaction .fds-spinner__circle {
-    stroke: var(--fds-semantic-border-action-first-default);
+  .ds-spinner--accent .ds-spinner__circle {
+    stroke: var(--ds-color-accent-base-default);
   }
 
-  .fds-spinner--inverted .fds-spinner__circle {
-    stroke: var(--fds-semantic-surface-neutral-default);
+  .ds-spinner__background {
+    stroke: var(--ds-color-neutral-surface-default);
   }
 
-  .fds-spinner__background {
-    stroke: var(--fds-semantic-border-neutral-subtle);
-  }
-
-  .fds-spinner__background--inverted {
-    stroke: var(--fds-semantic-surface-neutral-dark);
-  }
-
-  @keyframes fds-spinner-rotate-animation {
+  @keyframes ds-spinner-rotate-animation {
     0% {
       transform: rotate(0deg);
     }
@@ -54,7 +46,7 @@
     }
   }
 
-  @keyframes fds-spinner-stroke-animation {
+  @keyframes ds-spinner-stroke-animation {
     0% {
       stroke-dasharray: 1px, 200px;
       stroke-dashoffset: 0;

package/switch.css

@@ -1,68 +1,71 @@
-@layer fds.switch {
-  .fds-switch {
-    --fds-switch--transition: 200ms;
-    --fds-switch-height: 1.75rem;
-    --fds-switch-focus-border-width: 3px;
+@layer ds.switch {
+  .ds-switch {
+    --dsc-switch--transition: 200ms;
+    --dsc-switch-height: 1.75rem;
+    --dsc-switch-focus-border-width: 3px;
+    --dsc-switch-check_color: transparent;
+    --dsc-switch-thumb-background-color: var(--ds-color-neutral-background-default);
 
     position: relative;
   }
 
   @media (prefers-reduced-motion) {
     .switch {
-      --fds-switch--transition: 0;
+      --dsc-switch--transition: 0;
     }
   }
 
-  .fds-switch__label {
-    min-height: var(--fds-sizing-10);
+  .ds-switch__label {
+    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;
   }
 
-  .fds-switch__track {
+  .ds-switch__track {
     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);
+  .ds-switch__description {
+    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 {
+  .ds-switch__readonly__icon {
     height: 1.2em;
     width: 1.2em;
   }
 
-  .fds-switch__label--right {
+  .ds-switch__label--right {
     grid-template-columns: 1fr auto;
     grid-auto-flow: dense;
   }
 
-  .fds-switch__label--right .fds-switch__track {
+  .ds-switch__label--right .ds-switch__track {
     order: 1;
     margin-right: 0;
   }
 
-  .fds-switch__label--right + .fds-switch__description {
+  .ds-switch__label--right + .ds-switch__description {
     padding-left: 0;
   }
 
-  .fds-switch__input {
+  .ds-switch__input {
     position: absolute;
     width: 2.75rem;
     height: 2.75rem;
@@ -72,143 +75,170 @@
     margin: 0;
   }
 
-  .fds-switch--readonly > .fds-switch__label {
+  .ds-switch--readonly > .ds-switch__label {
     grid-template-columns: auto min-content 1fr;
   }
 
-  .fds-switch--readonly > .fds-switch__label:where(.fds-switch__label--right) {
+  .ds-switch--readonly > .ds-switch__label:where(.ds-switch__label--right) {
     grid-template-columns: min-content 1fr auto;
   }
 
-  .fds-switch--readonly > .fds-switch__input,
-  .fds-switch--readonly > .fds-switch__label {
+  .ds-switch--readonly > .ds-switch__input,
+  .ds-switch--readonly > .ds-switch__label {
     cursor: default;
   }
 
-  .fds-switch--readonly > .fds-switch__description {
-    margin-left: var(--fds-spacing-1);
+  .ds-switch--readonly > .ds-switch__description {
+    margin-left: var(--ds-spacing-1);
   }
 
-  .fds-switch--sm,
-  .fds-switch--sm .fds-switch__label {
-    min-height: var(--fds-sizing-6);
+  .ds-switch--sm,
+  .ds-switch--sm .ds-switch__label {
+    min-height: var(--ds-sizing-6);
   }
 
-  .fds-switch--md,
-  .fds-switch--md .fds-switch__label {
-    min-height: var(--fds-sizing-7);
+  .ds-switch--md,
+  .ds-switch--md .ds-switch__label {
+    min-height: var(--ds-sizing-7);
   }
 
-  .fds-switch--lg,
-  .fds-switch--lg .fds-switch__label {
-    min-height: var(--fds-sizing-8);
+  .ds-switch--lg,
+  .ds-switch--lg .ds-switch__label {
+    min-height: var(--ds-sizing-8);
   }
 
-  .fds-switch--sm {
-    --fds-switch-height: var(--fds-sizing-6);
-    --fds-switch-width: var(--fds-sizing-11);
+  .ds-switch--sm {
+    --dsc-switch-height: var(--ds-sizing-6);
+    --dsc-switch-width: var(--ds-sizing-11);
   }
 
-  .fds-switch--sm .fds-switch__input {
+  .ds-switch--sm .ds-switch__input {
     left: -0.25rem;
     top: -0.25rem;
   }
 
-  .fds-switch--md {
-    --fds-switch-height: var(--fds-sizing-7);
-    --fds-switch-width: var(--fds-sizing-13);
+  .ds-switch--md {
+    --dsc-switch-height: var(--ds-sizing-7);
+    --dsc-switch-width: var(--ds-sizing-13);
   }
 
-  .fds-switch--md .fds-switch__input {
+  .ds-switch--md .ds-switch__input {
     left: 0;
     top: 0;
   }
 
-  .fds-switch--lg {
-    --fds-switch-height: var(--fds-sizing-8);
-    --fds-switch-width: var(--fds-sizing-15);
+  .ds-switch--lg {
+    --dsc-switch-height: var(--ds-sizing-8);
+    --dsc-switch-width: var(--ds-sizing-15);
   }
 
-  .fds-switch--lg .fds-switch__input {
+  .ds-switch--lg .ds-switch__input {
     left: 0;
     top: 0.25rem;
   }
 
-  .fds-switch__label:has(.fds-switch__track:only-child) {
+  .ds-switch__label:has(.ds-switch__track:only-child) {
     grid-template-columns: auto;
   }
 
-  .fds-switch__label:has(.fds-switch__track:only-child) .fds-switch__track {
+  .ds-switch__label:has(.ds-switch__track:only-child) .ds-switch__track {
     margin-right: 0;
   }
 
-  .fds-switch__input:disabled,
-  .fds-switch:has(.fds-switch__input:disabled) > .fds-switch__label {
+  .ds-switch__input:disabled,
+  .ds-switch:has(.ds-switch__input:disabled) > .ds-switch__label {
     cursor: not-allowed;
   }
 
-  .fds-switch:has(.fds-switch__input:disabled) > .fds-switch__label,
-  .fds-switch:has(.fds-switch__input:disabled) > .fds-switch__description {
-    opacity: var(--fds-opacity-disabled);
+  .ds-switch:has(.ds-switch__input:disabled) > .ds-switch__label,
+  .ds-switch:has(.ds-switch__input:disabled) > .ds-switch__description {
+    opacity: var(--ds-disabled-opacity);
   }
 
-  .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);
+  /*   .ds-switch__input:focus-visible + .ds-switch__label .ds-switch__track {
+    outline: var(--dsc-switch-focus-border-width) solid var(--ds-focus-outer);
+    outline-offset: var(--dsc-switch-focus-border-width);
+    box-shadow: 0 0 0 var(--dsc-switch-focus-border-width) var(--ds-focus-inner);
+  } */
+
+  /**
+ * Apply a focus outline on an element when it is focused with keyboard
+ */
+  .ds-switch:has(.ds-switch__input:focus-visible) {
+    --dsc-focus-border-width: 3px;
+
+    outline: var(--dsc-focus-border-width) solid var(--ds-focus-outer);
+    outline-offset: var(--dsc-focus-border-width);
+    box-shadow: 0 0 0 var(--dsc-focus-border-width) var(--ds-focus-inner);
+    border-radius: var(--ds-border-radius-md);
   }
 
-  .fds-switch__input:not([readonly]):checked + .fds-switch__label .fds-switch__track {
-    background-color: var(--fds-semantic-surface-success-default);
+  .ds-switch__input:not([readonly]):checked + .ds-switch__label .ds-switch__track {
+    background-color: var(--ds-color-accent-base-default);
   }
 
-  .fds-switch__thumb {
+  .ds-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(--dsc-switch-thumb-background-color);
+    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");
+  .ds-switch__input:checked + .ds-switch__label .ds-switch__track .ds-switch__thumb {
+    --dsc-switch-check_color: var(--ds-color-accent-base-default);
+    --dsc-switch-thumb-background-color: var(--ds-color-accent-contrast-default);
+
+    transform: translateX(calc((var(--dsc-switch-width) - var(--dsc-switch-height)) * 1.2));
   }
 
-  .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);
+  .ds-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 > .fds-switch__thumb {
-    background-color: var(--fds-semantic-border-neutral-default);
+  .ds-switch--readonly .ds-switch__input[readonly] + .ds-switch__label .ds-switch__track {
+    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]: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");
+  .ds-switch--readonly .ds-switch__input[readonly] + .ds-switch__label .ds-switch__track > .ds-switch__thumb {
+    --dsc-switch-check_color: var(--ds-color-neutral-background-subtle);
+
+    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));
+    .ds-switch__input:not([readonly], :disabled):hover + .ds-switch__label .ds-switch__track > .ds-switch__thumb {
+      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);
+    .ds-switch__input:not([readonly], :disabled):hover + .ds-switch__label {
+      color: var(--ds-color-accent-text-subtle);
     }
 
-    .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");
+    .ds-switch__input:not(:disabled, [readonly]):checked:hover + .ds-switch__label .ds-switch__track > .ds-switch__thumb {
+      --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);
+    .ds-switch__input:not(:checked, :disabled, [readonly]):hover + .ds-switch__label .ds-switch__track {
+      background-color: var(--ds-color-neutral-border-strong);
     }
 
-    .fds-switch__input:not(:disabled, [readonly]):checked:hover + .fds-switch__label .fds-switch__track {
-      background-color: var(--fds-semantic-surface-success-hover);
+    .ds-switch__input:not(:disabled, [readonly]):checked:hover + .ds-switch__label .ds-switch__track {
+      background-color: var(--ds-color-accent-base-hover);
     }
   }
 }

package/table.css

@@ -1,64 +1,65 @@
-@layer fds.table {
-  .fds-table {
+@layer ds.table {
+  .ds-table {
+    --dsc-table-padding: 0;
+    --dsc-table-border-radius: var(--ds-border-radius-md);
+
     position: relative;
     border-collapse: separate;
     border-spacing: 0;
     text-align: left;
-
-    --table-padding: 0;
-    --border-radius: var(--fds-border_radius-medium);
+    color: var(--ds-color-neutral-text-default);
   }
 
-  .fds-table--sticky-header {
+  .ds-table--sticky-header {
     overflow: auto;
   }
 
-  .fds-table--border .fds-table__row:last-of-type td {
+  .ds-table--border .ds-table__row:last-of-type td {
     border-bottom: 0;
   }
 
-  .fds-table--sm {
-    --table-padding: var(--fds-spacing-1) var(--fds-spacing-3);
+  .ds-table--sm {
+    --dsc-table-padding: var(--ds-spacing-1) var(--ds-spacing-3);
   }
 
-  .fds-table--md {
-    --table-padding: var(--fds-spacing-2) var(--fds-spacing-3);
+  .ds-table--md {
+    --dsc-table-padding: var(--ds-spacing-2) var(--ds-spacing-3);
   }
 
-  .fds-table--lg {
-    --table-padding: var(--fds-spacing-3) var(--fds-spacing-3);
+  .ds-table--lg {
+    --dsc-table-padding: var(--ds-spacing-3) var(--ds-spacing-3);
   }
 
-  .fds-table__head {
+  .ds-table__head {
     z-index: 0;
     box-sizing: border-box;
     font: inherit;
     font-family: inherit;
     border-spacing: 0;
     font-weight: 500;
-    border-bottom: 2px solid var(--fds-semantic-border-divider-default);
+    border-bottom: 2px solid var(--ds-color-neutral-border-subtle);
   }
 
-  .fds-table__header__cell {
-    padding: var(--table-padding);
+  .ds-table__header__cell {
+    padding: var(--dsc-table-padding);
     font: inherit;
     font-family: inherit;
-    background-color: var(--fds-semantic-surface-neutral-default);
+    background-color: var(--ds-color-neutral-background-default);
     border-spacing: 0;
-    border-bottom: 2px solid var(--fds-semantic-border-divider-default);
+    border-bottom: 2px solid var(--ds-color-neutral-border-subtle);
   }
 
-  .fds-table--sticky-header .fds-table__head .fds-table__header__cell {
+  .ds-table--sticky-header .ds-table__head .ds-table__header__cell {
     position: sticky;
     top: 0;
     z-index: 1;
   }
 
-  .fds-table__header__cell--sortable {
+  .ds-table__header__cell--sortable {
     padding: 0;
   }
 
-  .fds-table__header__cell--sortable button {
+  .ds-table__header__cell--sortable button {
     position: relative;
     width: 100%;
     border: none;
@@ -66,71 +67,74 @@
     font-family: inherit;
     display: flex;
     cursor: pointer;
-    gap: var(--fds-spacing-1);
+    gap: var(--ds-spacing-1);
     align-items: center;
-    padding: var(--table-padding);
+    padding: var(--dsc-table-padding);
     background-color: transparent;
+    color: var(--ds-color-neutral-text-default);
     z-index: 2;
   }
 
-  .fds-table__header__cell--sorted button {
-    background-color: var(--fds-semantic-surface-neutral-subtle);
+  .ds-table__header__cell--sorted button {
+    background-color: var(--ds-color-neutral-background-subtle);
   }
 
-  .fds-table__header__cell--sortable button:focus {
+  .ds-table__header__cell--sortable button:focus-visible {
     z-index: 3;
+    outline-offset: -3px;
+    box-shadow: unset;
   }
 
-  .fds-table__header__cell--sortable button svg {
+  .ds-table__header__cell--sortable button svg {
     font-size: 1.2em;
   }
 
-  .fds-table__cell {
-    padding: var(--table-padding);
-    border-bottom: 1px solid var(--fds-semantic-border-divider-default);
-    background-color: var(--fds-semantic-surface-neutral-default);
+  .ds-table__cell {
+    padding: var(--dsc-table-padding);
+    border-bottom: 1px solid var(--ds-color-neutral-border-subtle);
+    background-color: var(--ds-color-neutral-background-default);
   }
 
-  .fds-table--zebra .fds-table__row {
+  .ds-table--zebra .ds-table__row {
     border-bottom: 0;
   }
 
-  .fds-table--zebra tr:nth-child(even):not(:hover) .fds-table__cell {
-    background-color: var(--fds-semantic-background-subtle);
+  .ds-table--zebra tr:nth-child(even):not(:hover) .ds-table__cell {
+    background-color: var(--ds-color-neutral-background-subtle);
   }
 
-  .fds-table--border {
-    border-radius: var(--border-radius);
-    border: 1px solid var(--fds-semantic-border-neutral-default);
+  .ds-table--border {
+    border-radius: var(--dsc-table-border-radius);
+    border: 1px solid var(--ds-color-neutral-border-subtle);
   }
 
-  .fds-table--border .fds-table__head .fds-table__header__cell:first-of-type {
-    border-top-left-radius: var(--border-radius);
+  .ds-table--border .ds-table__head .ds-table__header__cell:first-of-type {
+    border-top-left-radius: var(--dsc-table-border-radius);
     overflow: hidden;
   }
 
-  .fds-table--border .fds-table__head .fds-table__header__cell:last-of-type {
-    border-top-right-radius: var(--border-radius);
+  .ds-table--border .ds-table__head .ds-table__header__cell:last-of-type {
+    border-top-right-radius: var(--dsc-table-border-radius);
     overflow: hidden;
   }
 
-  .fds-table--border .fds-table__row:last-of-type .fds-table__cell:first-of-type {
-    border-bottom-left-radius: var(--border-radius);
+  .ds-table--border .ds-table__row:last-of-type .ds-table__cell:first-of-type {
+    border-bottom-left-radius: var(--dsc-table-border-radius);
     overflow: hidden;
   }
 
-  .fds-table--border .fds-table__row:last-of-type .fds-table__cell:last-of-type {
-    border-bottom-right-radius: var(--border-radius);
+  .ds-table--border .ds-table__row:last-of-type .ds-table__cell:last-of-type {
+    border-bottom-right-radius: var(--dsc-table-border-radius);
     overflow: hidden;
   }
 
   @media (hover: hover) and (pointer: fine) {
-    .fds-table__row:hover .fds-table__cell {
-      background-color: var(--fds-semantic-surface-neutral-subtle-hover);
+    .ds-table__row:hover .ds-table__cell {
+      background-color: var(--ds-color-neutral-surface-default);
     }
 
-    .fds-table__header__cell--sortable button:hover {
-      background-color: var(--fds-semantic-surface-neutral-subtle-hover);
+    .ds-table__header__cell--sortable button:hover {
+      background-color: var(--ds-color-neutral-surface-default);
     }
   }
 }