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

package/switch.css

@@ -1,26 +1,24 @@
-@layer ds.switch {
+@layer fds.switch {
   .fds-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);
+    --fds-switch--transition: 200ms;
+    --fds-switch-height: 1.75rem;
+    --fds-switch-focus-border-width: 3px;
 
     position: relative;
   }
 
   @media (prefers-reduced-motion) {
     .switch {
-      --dsc-switch--transition: 0;
+      --fds-switch--transition: 0;
     }
   }
 
   .fds-switch__label {
-    min-height: var(--ds-sizing-10);
+    min-height: var(--fds-sizing-10);
     min-width: min-content;
     display: grid;
     grid-template-columns: auto 1fr;
-    gap: var(--ds-spacing-1);
+    gap: var(--fds-spacing-1);
     align-items: center;
     cursor: pointer;
   }
@@ -29,21 +27,20 @@
     position: relative;
     display: inline-block;
     pointer-events: none;
-    width: var(--dsc-switch-width);
-    height: var(--dsc-switch-height);
+    width: var(--fds-switch-width);
+    height: var(--fds-switch-height);
     margin: auto;
     overflow: visible;
-    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);
+    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);
   }
 
   .fds-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;
+    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);
   }
 
   .fds-switch__readonly__icon {
@@ -89,27 +86,27 @@
   }
 
   .fds-switch--readonly > .fds-switch__description {
-    margin-left: var(--ds-spacing-1);
+    margin-left: var(--fds-spacing-1);
   }
 
   .fds-switch--sm,
   .fds-switch--sm .fds-switch__label {
-    min-height: var(--ds-sizing-6);
+    min-height: var(--fds-sizing-6);
   }
 
   .fds-switch--md,
   .fds-switch--md .fds-switch__label {
-    min-height: var(--ds-sizing-7);
+    min-height: var(--fds-sizing-7);
   }
 
   .fds-switch--lg,
   .fds-switch--lg .fds-switch__label {
-    min-height: var(--ds-sizing-8);
+    min-height: var(--fds-sizing-8);
   }
 
   .fds-switch--sm {
-    --dsc-switch-height: var(--ds-sizing-6);
-    --dsc-switch-width: var(--ds-sizing-11);
+    --fds-switch-height: var(--fds-sizing-6);
+    --fds-switch-width: var(--fds-sizing-11);
   }
 
   .fds-switch--sm .fds-switch__input {
@@ -118,8 +115,8 @@
   }
 
   .fds-switch--md {
-    --dsc-switch-height: var(--ds-sizing-7);
-    --dsc-switch-width: var(--ds-sizing-13);
+    --fds-switch-height: var(--fds-sizing-7);
+    --fds-switch-width: var(--fds-sizing-13);
   }
 
   .fds-switch--md .fds-switch__input {
@@ -128,8 +125,8 @@
   }
 
   .fds-switch--lg {
-    --dsc-switch-height: var(--ds-sizing-8);
-    --dsc-switch-width: var(--ds-sizing-15);
+    --fds-switch-height: var(--fds-sizing-8);
+    --fds-switch-width: var(--fds-sizing-15);
   }
 
   .fds-switch--lg .fds-switch__input {
@@ -152,81 +149,66 @@
 
   .fds-switch:has(.fds-switch__input:disabled) > .fds-switch__label,
   .fds-switch:has(.fds-switch__input:disabled) > .fds-switch__description {
-    opacity: var(--ds-disabled-opacity);
+    opacity: var(--fds-opacity-disabled);
   }
 
   .fds-switch__input:focus-visible + .fds-switch__label .fds-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);
+    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);
   }
 
   .fds-switch__input:not([readonly]):checked + .fds-switch__label .fds-switch__track {
-    background-color: var(--ds-color-accent-base-default);
+    background-color: var(--fds-semantic-surface-success-default);
   }
 
   .fds-switch__thumb {
     scale: 0.8;
     position: absolute;
-    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;
+    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;
   }
 
   .fds-switch__input:checked + .fds-switch__label .fds-switch__track .fds-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__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;
+    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");
   }
 
   .fds-switch--readonly .fds-switch__input[readonly] + .fds-switch__label .fds-switch__track {
-    box-shadow: inset 0 0 0 2px var(--ds-color-neutral-border-subtle);
-    background-color: var(--ds-color-neutral-background-subtle);
+    box-shadow: inset 0 0 0 2px var(--fds-semantic-border-neutral-subtle);
+    background-color: var(--fds-semantic-background-subtle);
   }
 
   .fds-switch--readonly .fds-switch__input[readonly] + .fds-switch__label .fds-switch__track > .fds-switch__thumb {
-    --dsc-switch-check_color: var(--ds-color-neutral-background-subtle);
+    background-color: var(--fds-semantic-border-neutral-default);
+  }
 
-    background-color: var(--ds-color-neutral-border-strong);
+  .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");
   }
 
   @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(--dsc-switch-width) - var(--dsc-switch-height)) * 0.2));
+      transform: translateX(calc((var(--fds-switch-width) - var(--fds-switch-height)) * 0.2));
     }
 
     .fds-switch__input:not([readonly], :disabled):hover + .fds-switch__label {
-      color: var(--ds-color-accent-text-subtle);
+      color: var(--fds-semantic-border-input-hover);
     }
 
     .fds-switch__input:not(:disabled, [readonly]):checked:hover + .fds-switch__label .fds-switch__track > .fds-switch__thumb {
-      --dsc-switch-check_color: var(--ds-color-accent-base-hover);
-
-      transform: translateX(calc((var(--dsc-switch-width) - var(--dsc-switch-height))));
+      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");
     }
 
     .fds-switch__input:not(:checked, :disabled, [readonly]):hover + .fds-switch__label .fds-switch__track {
-      background-color: var(--ds-color-neutral-border-strong);
+      background-color: var(--fds-semantic-surface-neutral-dark-hover);
     }
 
     .fds-switch__input:not(:disabled, [readonly]):checked:hover + .fds-switch__label .fds-switch__track {
-      background-color: var(--ds-color-accent-base-hover);
+      background-color: var(--fds-semantic-surface-success-hover);
     }
   }
 }

package/table.css

@@ -1,13 +1,12 @@
-@layer ds.table {
+@layer fds.table {
   .fds-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;
-    color: var(--ds-color-neutral-text-default);
+
+    --table-padding: 0;
+    --border-radius: var(--fds-border_radius-medium);
   }
 
   .fds-table--sticky-header {
@@ -19,15 +18,15 @@
   }
 
   .fds-table--sm {
-    --dsc-table-padding: var(--ds-spacing-1) var(--ds-spacing-3);
+    --table-padding: var(--fds-spacing-1) var(--fds-spacing-3);
   }
 
   .fds-table--md {
-    --dsc-table-padding: var(--ds-spacing-2) var(--ds-spacing-3);
+    --table-padding: var(--fds-spacing-2) var(--fds-spacing-3);
   }
 
   .fds-table--lg {
-    --dsc-table-padding: var(--ds-spacing-3) var(--ds-spacing-3);
+    --table-padding: var(--fds-spacing-3) var(--fds-spacing-3);
   }
 
   .fds-table__head {
@@ -37,16 +36,16 @@
     font-family: inherit;
     border-spacing: 0;
     font-weight: 500;
-    border-bottom: 2px solid var(--ds-color-neutral-border-subtle);
+    border-bottom: 2px solid var(--fds-semantic-border-divider-default);
   }
 
   .fds-table__header__cell {
-    padding: var(--dsc-table-padding);
+    padding: var(--table-padding);
     font: inherit;
     font-family: inherit;
-    background-color: var(--ds-color-neutral-background-default);
+    background-color: var(--fds-semantic-surface-neutral-default);
     border-spacing: 0;
-    border-bottom: 2px solid var(--ds-color-neutral-border-subtle);
+    border-bottom: 2px solid var(--fds-semantic-border-divider-default);
   }
 
   .fds-table--sticky-header .fds-table__head .fds-table__header__cell {
@@ -67,22 +66,19 @@
     font-family: inherit;
     display: flex;
     cursor: pointer;
-    gap: var(--ds-spacing-1);
+    gap: var(--fds-spacing-1);
     align-items: center;
-    padding: var(--dsc-table-padding);
+    padding: var(--table-padding);
     background-color: transparent;
-    color: var(--ds-color-neutral-text-default);
     z-index: 2;
   }
 
   .fds-table__header__cell--sorted button {
-    background-color: var(--ds-color-neutral-background-subtle);
+    background-color: var(--fds-semantic-surface-neutral-subtle);
   }
 
-  .fds-table__header__cell--sortable button:focus-visible {
+  .fds-table__header__cell--sortable button:focus {
     z-index: 3;
-    outline-offset: -3px;
-    box-shadow: unset;
   }
 
   .fds-table__header__cell--sortable button svg {
@@ -90,9 +86,9 @@
   }
 
   .fds-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);
+    padding: var(--table-padding);
+    border-bottom: 1px solid var(--fds-semantic-border-divider-default);
+    background-color: var(--fds-semantic-surface-neutral-default);
   }
 
   .fds-table--zebra .fds-table__row {
@@ -100,41 +96,41 @@
   }
 
   .fds-table--zebra tr:nth-child(even):not(:hover) .fds-table__cell {
-    background-color: var(--ds-color-neutral-background-subtle);
+    background-color: var(--fds-semantic-background-subtle);
   }
 
   .fds-table--border {
-    border-radius: var(--dsc-table-border-radius);
-    border: 1px solid var(--ds-color-neutral-border-default);
+    border-radius: var(--border-radius);
+    border: 1px solid var(--fds-semantic-border-neutral-default);
   }
 
   .fds-table--border .fds-table__head .fds-table__header__cell:first-of-type {
-    border-top-left-radius: var(--dsc-table-border-radius);
+    border-top-left-radius: var(--border-radius);
     overflow: hidden;
   }
 
   .fds-table--border .fds-table__head .fds-table__header__cell:last-of-type {
-    border-top-right-radius: var(--dsc-table-border-radius);
+    border-top-right-radius: var(--border-radius);
     overflow: hidden;
   }
 
   .fds-table--border .fds-table__row:last-of-type .fds-table__cell:first-of-type {
-    border-bottom-left-radius: var(--dsc-table-border-radius);
+    border-bottom-left-radius: var(--border-radius);
     overflow: hidden;
   }
 
   .fds-table--border .fds-table__row:last-of-type .fds-table__cell:last-of-type {
-    border-bottom-right-radius: var(--dsc-table-border-radius);
+    border-bottom-right-radius: var(--border-radius);
     overflow: hidden;
   }
 
   @media (hover: hover) and (pointer: fine) {
     .fds-table__row:hover .fds-table__cell {
-      background-color: var(--ds-color-neutral-surface-default);
+      background-color: var(--fds-semantic-surface-neutral-subtle-hover);
     }
 
     .fds-table__header__cell--sortable button:hover {
-      background-color: var(--ds-color-neutral-surface-default);
+      background-color: var(--fds-semantic-surface-neutral-subtle-hover);
     }
   }
 }

package/tabs.css

@@ -1,82 +1,86 @@
-@layer ds.tabs {
+@layer fds.tabs {
   .fds-tabs__tab {
-    --dsc-tabs__tab-bottom-border-color: transparent;
+    --fds-tabs__tab-bottom-border-color: transparent;
 
     display: flex;
     flex-direction: row;
     box-sizing: border-box;
-    gap: var(--ds-spacing-1);
+    gap: var(--fds-spacing-1);
     justify-content: center;
     text-align: center;
     align-items: center;
-    padding: var(--ds-spacing-2) var(--ds-spacing-3);
+    padding: var(--fds-spacing-2) var(--fds-spacing-3);
     border: none;
     border-radius: 0;
     background-color: transparent;
     cursor: pointer;
-    color: var(--ds-color-neutral-text-subtle);
+    color: var(--fds-semantic-text-neutral-subtle);
     position: relative;
   }
 
   .fds-tabs__content {
-    padding: var(--ds-spacing-5);
+    padding: var(--fds-spacing-5);
   }
 
   .fds-tabs--sm .fds-tabs__tab,
   .fds-tabs--sm .fds-tabs__content {
-    font: var(--ds-typography-paragraph-short-sm);
+    font: var(--fds-typography-paragraph-short-small);
   }
 
   .fds-tabs--md .fds-tabs__tab,
   .fds-tabs--md .fds-tabs__content {
-    font: var(--ds-typography-paragraph-short-md);
+    font: var(--fds-typography-paragraph-short-medium);
   }
 
   .fds-tabs--lg .fds-tabs__tab,
   .fds-tabs--lg .fds-tabs__content {
-    font: var(--ds-typography-paragraph-short-lg);
+    font: var(--fds-typography-paragraph-short-large);
   }
 
   .fds-tabs--sm .fds-tabs__tab {
-    padding: var(--ds-spacing-2) var(--ds-spacing-4);
+    padding: var(--fds-spacing-2) var(--fds-spacing-4);
   }
 
   .fds-tabs--md .fds-tabs__tab {
-    padding: var(--ds-spacing-3) var(--ds-spacing-5);
+    padding: var(--fds-spacing-3) var(--fds-spacing-5);
   }
 
   .fds-tabs--lg .fds-tabs__tab {
-    padding: var(--ds-spacing-4) var(--ds-spacing-6);
+    padding: var(--fds-spacing-4) var(--fds-spacing-6);
   }
 
   .fds-tabs--sm .fds-tabs__content {
-    padding: var(--ds-spacing-4);
+    padding: var(--fds-spacing-4);
   }
 
   .fds-tabs--md .fds-tabs__content {
-    padding: var(--ds-spacing-5);
+    padding: var(--fds-spacing-5);
   }
 
   .fds-tabs--lg .fds-tabs__content {
-    padding: var(--ds-spacing-6);
+    padding: var(--fds-spacing-6);
   }
 
   @media (hover: hover) and (pointer: fine) {
     .fds-tabs__tab:hover:not([aria-selected='true']) {
-      --dsc-tabs__tab-bottom-border-color: var(--ds-color-neutral-border-subtle);
+      --fds-tabs__tab-bottom-border-color: var(--fds-semantic-border-neutral-subtle);
 
-      color: var(--ds-color-neutral-text-default);
+      color: var(--fds-semantic-text-neutral-default);
     }
   }
 
   .fds-tabs__tab[aria-selected='true'] {
-    --dsc-tabs__tab-bottom-border-color: var(--ds-color-accent-base-default);
+    --fds-tabs__tab-bottom-border-color: var(--fds-semantic-border-action-default);
 
-    color: var(--ds-color-accent-text-subtle);
+    color: var(--fds-semantic-text-action-default);
   }
 
-  .fds-tabs__tab:focus {
-    z-index: 2;
+  .fds-tabs__tab:focus-visible {
+    --fds-tabs__tab-bottom-border-color: var(--fds-semantic-text-neutral-default);
+
+    background: var(--fds-semantic-border-focus-outline);
+    color: var(--fds-semantic-text-neutral-default);
+    outline: none;
   }
 
   .fds-tabs__tab::after {
@@ -84,8 +88,8 @@
     display: block;
     height: 3px;
     width: 100%;
-    border-radius: var(--ds-border-radius-full);
-    background-color: var(--dsc-tabs__tab-bottom-border-color);
+    border-radius: var(--fds-border_radius-full);
+    background-color: var(--fds-tabs__tab-bottom-border-color);
     position: absolute;
     bottom: 0;
     left: 0;
@@ -94,7 +98,6 @@
   .fds-tabs__tablist {
     display: flex;
     flex-direction: row;
-    border-bottom: var(--ds-border-width-default) solid var(--ds-color-neutral-border-subtle);
-    position: relative;
+    border-bottom: var(--fds-border_width-default) solid var(--fds-semantic-border-neutral-subtle);
   }
 }

package/tag.css

@@ -1,13 +1,13 @@
-@layer ds.tag {
+@layer fds.tag {
   .fds-tag {
-    --dsc-tag-background: var(--ds-color-neutral-background-subtle);
-    --dsc-tag-color: var(--ds-color-neutral-text-default);
+    --fds-tag-background: var(--fds-semantic-surface-neutral-subtle);
+    --fds-tag-color: var(--fds-semantic-text-neutral-default);
 
-    color: var(--dsc-tag-color);
-    padding: 0 var(--ds-spacing-2);
-    min-height: var(--ds-sizing-8);
-    background-color: var(--dsc-tag-background);
-    border-radius: var(--ds-border-radius-sm);
+    color: var(--fds-tag-color);
+    padding: 0 var(--fds-spacing-2);
+    min-height: var(--fds-sizing-8);
+    background-color: var(--fds-tag-background);
+    border-radius: var(--fds-border_radius-small);
     display: flex;
     align-items: center;
     box-sizing: border-box;
@@ -16,57 +16,57 @@
   }
 
   .fds-tag--sm {
-    padding: 0 var(--ds-spacing-2);
-    min-height: var(--ds-sizing-7);
+    padding: 0 var(--fds-spacing-2);
+    min-height: var(--fds-sizing-7);
   }
 
   .fds-tag--md {
-    padding: 0 var(--ds-spacing-2);
-    min-height: var(--ds-sizing-8);
+    padding: 0 var(--fds-spacing-2);
+    min-height: var(--fds-sizing-8);
   }
 
   .fds-tag--lg {
-    padding: 0 var(--ds-spacing-3);
-    min-height: var(--ds-sizing-9);
+    padding: 0 var(--fds-spacing-3);
+    min-height: var(--fds-sizing-9);
   }
 
   .fds-tag--neutral {
-    --dsc-tag-background: var(--ds-color-neutral-surface-default);
-    --dsc-tag-color: var(--ds-color-neutral-text-default);
+    --fds-tag-background: var(--fds-semantic-surface-neutral-subtle);
+    --fds-tag-color: var(--fds-semantic-text-neutral-default);
   }
 
   .fds-tag--info {
-    --dsc-tag-background: var(--ds-color-info-surface-default);
-    --dsc-tag-color: var(--ds-color-info-text-default);
+    --fds-tag-background: var(--fds-semantic-surface-info-subtle);
+    --fds-tag-color: var(--fds-semantic-text-neutral-default);
   }
 
   .fds-tag--success {
-    --dsc-tag-background: var(--ds-color-success-surface-default);
-    --dsc-tag-color: var(--ds-color-success-text-default);
+    --fds-tag-background: var(--fds-semantic-surface-success-subtle);
+    --fds-tag-color: var(--fds-semantic-text-success-on_success_subtle);
   }
 
   .fds-tag--warning {
-    --dsc-tag-background: var(--ds-color-warning-surface-default);
-    --dsc-tag-color: var(--ds-color-warning-text-default);
+    --fds-tag-background: var(--fds-semantic-surface-warning-default);
+    --fds-tag-color: var(--fds-semantic-text-neutral-default);
   }
 
   .fds-tag--danger {
-    --dsc-tag-background: var(--ds-color-danger-surface-default);
-    --dsc-tag-color: var(--ds-color-danger-text-default);
+    --fds-tag-background: var(--fds-semantic-surface-danger-subtle);
+    --fds-tag-color: var(--fds-semantic-text-danger-on_danger_subtle);
   }
 
-  .fds-tag--brand1 {
-    --dsc-tag-background: var(--ds-color-brand1-surface-default);
-    --dsc-tag-color: var(--ds-color-brand1-text-default);
+  .fds-tag--first {
+    --fds-tag-background: var(--fds-semantic-surface-first-light);
+    --fds-tag-color: var(--fds-semantic-text-neutral-default);
   }
 
-  .fds-tag--brand2 {
-    --dsc-tag-background: var(--ds-color-brand2-surface-default);
-    --dsc-tag-color: var(--ds-color-brand2-text-default);
+  .fds-tag--second {
+    --fds-tag-background: var(--fds-semantic-surface-second-light);
+    --fds-tag-color: var(--fds-semantic-text-neutral-default);
   }
 
-  .fds-tag--brand3 {
-    --dsc-tag-background: var(--ds-color-brand3-surface-default);
-    --dsc-tag-color: var(--ds-color-brand3-text-default);
+  .fds-tag--third {
+    --fds-tag-background: var(--fds-semantic-surface-third-light);
+    --fds-tag-color: var(--fds-semantic-text-neutral-default);
   }
 }