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

package/tabs.css

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

package/tag.css

@@ -1,13 +1,13 @@
-@layer fds.tag {
-  .fds-tag {
-    --fds-tag-background: var(--fds-semantic-surface-neutral-subtle);
-    --fds-tag-color: var(--fds-semantic-text-neutral-default);
+@layer ds.tag {
+  .ds-tag {
+    --dsc-tag-background: var(--ds-color-neutral-background-subtle);
+    --dsc-tag-color: var(--ds-color-neutral-text-default);
 
-    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);
+    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);
     display: flex;
     align-items: center;
     box-sizing: border-box;
@@ -15,58 +15,58 @@
     width: max-content;
   }
 
-  .fds-tag--sm {
-    padding: 0 var(--fds-spacing-2);
-    min-height: var(--fds-sizing-7);
+  .ds-tag--sm {
+    padding: 0 var(--ds-spacing-2);
+    min-height: var(--ds-sizing-7);
   }
 
-  .fds-tag--md {
-    padding: 0 var(--fds-spacing-2);
-    min-height: var(--fds-sizing-8);
+  .ds-tag--md {
+    padding: 0 var(--ds-spacing-2);
+    min-height: var(--ds-sizing-8);
   }
 
-  .fds-tag--lg {
-    padding: 0 var(--fds-spacing-3);
-    min-height: var(--fds-sizing-9);
+  .ds-tag--lg {
+    padding: 0 var(--ds-spacing-3);
+    min-height: var(--ds-sizing-9);
   }
 
-  .fds-tag--neutral {
-    --fds-tag-background: var(--fds-semantic-surface-neutral-subtle);
-    --fds-tag-color: var(--fds-semantic-text-neutral-default);
+  .ds-tag--neutral {
+    --dsc-tag-background: var(--ds-color-neutral-surface-default);
+    --dsc-tag-color: var(--ds-color-neutral-text-default);
   }
 
-  .fds-tag--info {
-    --fds-tag-background: var(--fds-semantic-surface-info-subtle);
-    --fds-tag-color: var(--fds-semantic-text-neutral-default);
+  .ds-tag--info {
+    --dsc-tag-background: var(--ds-color-info-surface-default);
+    --dsc-tag-color: var(--ds-color-info-text-default);
   }
 
-  .fds-tag--success {
-    --fds-tag-background: var(--fds-semantic-surface-success-subtle);
-    --fds-tag-color: var(--fds-semantic-text-success-on_success_subtle);
+  .ds-tag--success {
+    --dsc-tag-background: var(--ds-color-success-surface-default);
+    --dsc-tag-color: var(--ds-color-success-text-default);
   }
 
-  .fds-tag--warning {
-    --fds-tag-background: var(--fds-semantic-surface-warning-default);
-    --fds-tag-color: var(--fds-semantic-text-neutral-default);
+  .ds-tag--warning {
+    --dsc-tag-background: var(--ds-color-warning-surface-default);
+    --dsc-tag-color: var(--ds-color-warning-text-default);
   }
 
-  .fds-tag--danger {
-    --fds-tag-background: var(--fds-semantic-surface-danger-subtle);
-    --fds-tag-color: var(--fds-semantic-text-danger-on_danger_subtle);
+  .ds-tag--danger {
+    --dsc-tag-background: var(--ds-color-danger-surface-default);
+    --dsc-tag-color: var(--ds-color-danger-text-default);
   }
 
-  .fds-tag--first {
-    --fds-tag-background: var(--fds-semantic-surface-first-light);
-    --fds-tag-color: var(--fds-semantic-text-neutral-default);
+  .ds-tag--brand1 {
+    --dsc-tag-background: var(--ds-color-brand1-surface-default);
+    --dsc-tag-color: var(--ds-color-brand1-text-default);
   }
 
-  .fds-tag--second {
-    --fds-tag-background: var(--fds-semantic-surface-second-light);
-    --fds-tag-color: var(--fds-semantic-text-neutral-default);
+  .ds-tag--brand2 {
+    --dsc-tag-background: var(--ds-color-brand2-surface-default);
+    --dsc-tag-color: var(--ds-color-brand2-text-default);
   }
 
-  .fds-tag--third {
-    --fds-tag-background: var(--fds-semantic-surface-third-light);
-    --fds-tag-color: var(--fds-semantic-text-neutral-default);
+  .ds-tag--brand3 {
+    --dsc-tag-background: var(--ds-color-brand3-surface-default);
+    --dsc-tag-color: var(--ds-color-brand3-text-default);
   }
 }

package/textarea.css

@@ -1,32 +1,32 @@
-@layer fds.textarea {
-  .fds-textarea {
+@layer ds.textarea {
+  .ds-textarea {
     display: grid;
-    gap: var(--fds-spacing-2);
+    gap: var(--ds-spacing-2);
   }
 
-  .fds-textarea__readonly-icon {
+  .ds-textarea__readonly-icon {
     height: 1.2em;
     width: 1.2em;
   }
 
-  .fds-textarea__error-message:empty {
+  .ds-textarea__error-message:empty {
     display: none;
   }
 
-  .fds-textarea__label {
+  .ds-textarea__label {
     min-width: min-content;
     display: inline-flex;
     flex-direction: row;
-    gap: var(--fds-spacing-1);
+    gap: var(--ds-spacing-1);
     align-items: center;
   }
 
-  .fds-textarea__description {
-    color: var(--fds-semantic-text-neutral-subtle);
-    margin-top: calc(var(--fds-spacing-2) * -1);
+  .ds-textarea__description {
+    color: var(--ds-color-neutral-text-subtle);
+    margin-top: calc(var(--ds-spacing-2) * -1);
   }
 
-  .fds-textarea__input {
+  .ds-textarea__input {
     font: inherit;
     font-family: inherit;
     position: relative;
@@ -35,46 +35,48 @@
     min-height: 2.5em;
     width: 100%;
     appearance: none;
-    padding: var(--fds-spacing-3);
-    border: solid 1px var(--fds-semantic-border-input-default);
-    border-radius: var(--fds-border_radius-medium);
+    padding: var(--ds-spacing-3);
+    border: solid 1px var(--ds-color-neutral-border-default);
+    border-radius: var(--ds-border-radius-md);
     resize: vertical;
+    background: var(--ds-color-neutral-background-default);
+    color: var(--ds-color-neutral-text-default);
   }
 
-  .fds-textarea--sm .fds-textarea__input {
-    padding: var(--fds-spacing-2);
+  .ds-textarea--sm .ds-textarea__input {
+    padding: var(--ds-spacing-2);
   }
 
-  .fds-textarea--md .fds-textarea__input {
-    padding: var(--fds-spacing-3);
+  .ds-textarea--md .ds-textarea__input {
+    padding: var(--ds-spacing-3);
   }
 
-  .fds-textarea--lg .fds-textarea__input {
-    padding: var(--fds-spacing-4);
+  .ds-textarea--lg .ds-textarea__input {
+    padding: var(--ds-spacing-4);
   }
 
-  .fds-textarea:has(.fds-textarea__input:disabled) {
-    opacity: var(--fds-opacity-disabled);
+  .ds-textarea:has(.ds-textarea__input:disabled) {
+    opacity: var(--ds-disabled-opacity);
   }
 
-  .fds-textarea__input:disabled {
+  .ds-textarea__input:disabled {
     cursor: not-allowed;
   }
 
-  .fds-textarea__input:read-only {
-    background: var(--fds-semantic-surface-neutral-subtle);
-    border-color: var(--fds-semantic-border-neutral-default);
+  .ds-textarea__input:read-only {
+    background: var(--ds-color-neutral-background-subtle);
+    border-color: var(--ds-color-neutral-border-strong);
   }
 
-  .fds-textarea--error > .fds-textarea__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);
+  .ds-textarea--error > .ds-textarea__input:not(:focus-visible) {
+    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-textarea__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);
+    .ds-textarea__input:not(:focus-visible, :disabled, [aria-disabled]):hover {
+      border-color: var(--ds-color-accent-border-strong);
+      box-shadow: inset 0 0 0 1px var(--ds-color-accent-border-strong);
     }
   }
 }

package/textfield.css

@@ -1,20 +1,20 @@
-@layer fds.textfield {
-  .fds-textfield {
+@layer ds.textfield {
+  .ds-textfield {
     display: grid;
-    gap: var(--fds-spacing-2);
+    gap: var(--ds-spacing-2);
   }
 
-  .fds-textfield__adornment {
-    color: var(--fds-semantic-border-neutral-default);
-    background: var(--fds-semantic-surface-neutral-subtle);
-    padding: 9px var(--fds-spacing-4);
-    border-radius: var(--fds-border_radius-medium);
-    border: solid 1px var(--fds-semantic-border-neutral-default);
+  .ds-textfield__adornment {
+    color: var(--ds-color-neutral-border-strong);
+    background: var(--ds-color-neutral-background-subtle);
+    padding: 9px var(--ds-spacing-4);
+    border-radius: var(--ds-border-radius-md);
+    border: solid 1px var(--ds-color-neutral-border-strong);
     box-sizing: border-box;
     display: inline-block;
   }
 
-  .fds-textfield__input {
+  .ds-textfield__input {
     font: inherit;
     font-family: inherit;
     position: relative;
@@ -22,129 +22,131 @@
     flex: 0 1 auto;
     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);
+    background: var(--ds-color-neutral-background-default);
+    color: var(--ds-color-neutral-text-default);
+    border-radius: var(--ds-border-radius-md);
   }
 
-  .fds-textfield__input:disabled {
+  .ds-textfield__input:disabled {
     cursor: not-allowed;
   }
 
-  .fds-textfield--readonly .fds-textfield__input {
-    background: var(--fds-semantic-surface-neutral-subtle);
-    border-color: var(--fds-semantic-border-neutral-default);
+  .ds-textfield--readonly .ds-textfield__input {
+    background: var(--ds-color-neutral-background-subtle);
+    border-color: var(--ds-color-neutral-border-strong);
   }
 
-  .fds-textfield__field {
+  .ds-textfield__field {
     display: flex;
     align-items: stretch;
-    border-radius: var(--fds-border_radius-medium);
+    border-radius: var(--ds-border-radius-md);
   }
 
-  .fds-textfield__field > *:first-child {
-    border-top-left-radius: var(--fds-border_radius-medium);
-    border-bottom-left-radius: var(--fds-border_radius-medium);
+  .ds-textfield__field > *:first-child {
+    border-top-left-radius: var(--ds-border-radius-md);
+    border-bottom-left-radius: var(--ds-border-radius-md);
   }
 
-  .fds-textfield__field > *:last-child {
-    border-top-right-radius: var(--fds-border_radius-medium);
-    border-bottom-right-radius: var(--fds-border_radius-medium);
+  .ds-textfield__field > *:last-child {
+    border-top-right-radius: var(--ds-border-radius-md);
+    border-bottom-right-radius: var(--ds-border-radius-md);
   }
 
-  .fds-textfield--sm .fds-textfield__adornment {
-    padding: var(--fds-sizing-2) var(--fds-spacing-3);
+  .ds-textfield--sm .ds-textfield__adornment {
+    padding: var(--ds-sizing-2) var(--ds-spacing-3);
   }
 
-  .fds-textfield--md .fds-textfield__adornment {
-    padding: 0.65rem var(--fds-spacing-4);
+  .ds-textfield--md .ds-textfield__adornment {
+    padding: 0.65rem var(--ds-spacing-4);
   }
 
-  .fds-textfield--lg .fds-textfield__adornment {
-    padding: 0.85rem var(--fds-spacing-5);
+  .ds-textfield--lg .ds-textfield__adornment {
+    padding: 0.85rem var(--ds-spacing-5);
   }
 
-  .fds-textfield--sm .fds-textfield__field {
-    height: var(--fds-sizing-10);
+  .ds-textfield--sm .ds-textfield__field {
+    height: var(--ds-sizing-10);
   }
 
-  .fds-textfield--md .fds-textfield__field {
-    height: var(--fds-sizing-12);
+  .ds-textfield--md .ds-textfield__field {
+    height: var(--ds-sizing-12);
   }
 
-  .fds-textfield--lg .fds-textfield__field {
-    height: var(--fds-sizing-14);
+  .ds-textfield--lg .ds-textfield__field {
+    height: var(--ds-sizing-14);
   }
 
-  .fds-textfield--sm .fds-textfield__input {
-    padding: 0 var(--fds-spacing-2);
+  .ds-textfield--sm .ds-textfield__input {
+    padding: 0 var(--ds-spacing-2);
   }
 
-  .fds-textfield--md .fds-textfield__input {
-    padding: 0 var(--fds-spacing-3);
+  .ds-textfield--md .ds-textfield__input {
+    padding: 0 var(--ds-spacing-3);
   }
 
-  .fds-textfield--lg .fds-textfield__input {
-    padding: 0 var(--fds-spacing-4);
+  .ds-textfield--lg .ds-textfield__input {
+    padding: 0 var(--ds-spacing-4);
   }
 
-  .fds-textfield__label {
+  .ds-textfield__label {
     min-width: min-content;
     display: inline-flex;
     flex-direction: row;
-    gap: var(--fds-spacing-1);
+    gap: var(--ds-spacing-1);
     align-items: center;
   }
 
-  .fds-textfield__description {
-    color: var(--fds-semantic-text-neutral-subtle);
-    margin-top: calc(var(--fds-spacing-2) * -1);
+  .ds-textfield__description {
+    color: var(--ds-color-neutral-text-subtle);
+    margin-top: calc(var(--ds-spacing-2) * -1);
   }
 
-  .fds-textfield:has(.fds-textfield__input:disabled) {
-    opacity: var(--fds-opacity-disabled);
+  .ds-textfield:has(.ds-textfield__input:disabled) {
+    opacity: var(--ds-disabled-opacity);
   }
 
-  .fds-textfield--error .fds-textfield__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);
+  .ds-textfield--error .ds-textfield__input:not(:focus-visible) {
+    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-textfield__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);
+    .ds-textfield__input:not(:focus-visible, :disabled, [aria-disabled]):hover {
+      border-color: var(--ds-color-accent-border-strong);
+      box-shadow: inset 0 0 0 1px var(--ds-color-accent-border-strong);
     }
   }
 
-  .fds-textfield__input--with-prefix {
+  .ds-textfield__input--with-prefix {
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
   }
 
-  .fds-textfield__input--with-suffix {
+  .ds-textfield__input--with-suffix {
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
   }
 
-  .fds-textfield__prefix {
+  .ds-textfield__prefix {
     border-right: 0;
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
   }
 
-  .fds-textfield__suffix {
+  .ds-textfield__suffix {
     border-left: 0;
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
   }
 
-  .fds-textfield__readonly__icon {
+  .ds-textfield__readonly__icon {
     height: 1.2em;
     width: 1.2em;
   }
 
-  .fds-textfield__error-message:empty {
+  .ds-textfield__error-message:empty {
     display: none;
   }
 }

package/togglegroup.css

@@ -1,24 +1,25 @@
-@layer fds.togglegroup {
-  .fds-togglegroup {
-    background-color: var(--fds-semantic-background-default);
-    border: var(--fds-semantic-border-neutral-default) solid var(--fds-border_width-default);
-    border-radius: var(--fds-border_radius-large);
+@layer ds.togglegroup {
+  .ds-togglegroup {
+    background-color: var(--ds-color-neutral-background-default);
+    border: var(--ds-color-neutral-border-default) solid var(--ds-border-width-default);
+    border-radius: var(--ds-border-radius-lg);
     width: fit-content;
+    height: fit-content;
   }
 
-  .fds-togglegroup__content {
+  .ds-togglegroup__content {
     display: inline-grid;
-    gap: var(--fds-spacing-1);
+    gap: var(--ds-spacing-1);
     grid-auto-columns: 1fr;
     grid-auto-flow: column;
-    padding: var(--fds-spacing-1);
+    padding: var(--ds-spacing-1);
   }
 
-  .fds-togglegroup__input {
+  .ds-togglegroup__input {
     display: none;
   }
 
-  .fds-togglegroup__item:focus-visible {
+  .ds-togglegroup__item:focus-visible {
     z-index: 1;
   }
 }

package/tooltip.css

@@ -1,23 +1,16 @@
-@layer fds.tooltip {
-  .fds-tooltip {
-    background: var(--fds-semantic-surface-neutral-inverted);
-    padding: var(--fds-spacing-1) var(--fds-spacing-2);
-    color: var(--fds-semantic-text-neutral-on_inverted);
-    border-radius: var(--fds-border_radius-medium);
-    font: var(--fds-typography-paragraph-xsmall);
-    font-family: inherit;
-  }
+@layer ds.tooltip {
+  .ds-tooltip {
+    --dsc-tooltip-background: var(--ds-color-neutral-text-default);
 
-  .fds-tooltip--inverted {
-    background: var(--fds-semantic-surface-neutral-subtle);
-    color: var(--fds-semantic-text-neutral-default);
-  }
-
-  .fds-tooltip__arrow {
-    fill: var(--fds-semantic-surface-neutral-inverted);
+    background: var(--dsc-tooltip-background);
+    padding: var(--ds-spacing-1) var(--ds-spacing-2);
+    color: var(--ds-color-neutral-background-default);
+    border-radius: var(--ds-border-radius-md);
+    font: var(--ds-typography-paragraph-xs);
+    font-family: inherit;
   }
 
-  .fds-tooltip--inverted .fds-tooltip__arrow {
-    fill: var(--fds-semantic-surface-neutral-subtle);
+  .ds-tooltip__arrow {
+    fill: var(--dsc-tooltip-background);
   }
 }