diff --git a/packages/eds-core-react/src/components/next/Chip/chip.css b/packages/eds-core-react/src/components/next/Chip/chip.css
index ef92a8f91c..4eca778605 100644
--- a/packages/eds-core-react/src/components/next/Chip/chip.css
+++ b/packages/eds-core-react/src/components/next/Chip/chip.css
@@ -26,6 +26,30 @@
         (var(--_label-line-height) - var(--_label-height)) / 2
     );
 
+    /* Colours from the eds-tokens beta (Tokens Studio) — data-color-appearance
+     * selects the tone (Chip always sets it, default tone is neutral). Neutral
+     * has no --eds-text-neutral token; it maps text to --eds-text-primary by
+     * design (#5283). Non-neutral tones use --eds-text-{tone} for label text
+     * and --eds-icon-{tone} for icons (the two differ for accent: shade 12 vs
+     * shade 10). Surfaces use --eds-background-interactive-{tone}-*. */
+    --_bg-muted: var(--eds-background-interactive-neutral-muted-default);
+    --_bg-muted-hover: var(--eds-background-interactive-neutral-muted-hover);
+    --_bg-muted-pressed: var(
+      --eds-background-interactive-neutral-muted-pressed
+    );
+    --_bg-emphasis: var(--eds-background-interactive-neutral-emphasis-default);
+    --_bg-emphasis-hover: var(
+      --eds-background-interactive-neutral-emphasis-hover
+    );
+    --_bg-emphasis-pressed: var(
+      --eds-background-interactive-neutral-emphasis-pressed
+    );
+    --_text: var(--eds-text-primary);
+    --_icon: var(--eds-icon-primary);
+    --_border-interactive: var(
+      --eds-border-interactive-neutral-emphasis-default
+    );
+
     cursor: pointer;
     user-select: none;
 
@@ -43,70 +67,174 @@
     font-family: var(--_font-family);
     font-size: var(--_label-font-size);
     line-height: var(--_label-line-height);
-    color: inherit;
+    color: var(--_text);
 
     transition:
       background-color 150ms ease-in-out,
       outline-color 150ms ease-in-out,
       color 150ms ease-in-out;
 
+    /* ===== TONES ===== */
+
+    &[data-color-appearance='accent'] {
+      --_bg-muted: var(--eds-background-interactive-accent-muted-default);
+      --_bg-muted-hover: var(--eds-background-interactive-accent-muted-hover);
+      --_bg-muted-pressed: var(
+        --eds-background-interactive-accent-muted-pressed
+      );
+      --_bg-emphasis: var(--eds-background-interactive-accent-emphasis-default);
+      --_bg-emphasis-hover: var(
+        --eds-background-interactive-accent-emphasis-hover
+      );
+      --_bg-emphasis-pressed: var(
+        --eds-background-interactive-accent-emphasis-pressed
+      );
+      --_text: var(--eds-text-accent);
+      --_icon: var(--eds-icon-accent);
+      --_border-interactive: var(
+        --eds-border-interactive-accent-emphasis-default
+      );
+    }
+
+    &[data-color-appearance='success'] {
+      --_bg-muted: var(--eds-background-interactive-success-muted-default);
+      --_bg-muted-hover: var(--eds-background-interactive-success-muted-hover);
+      --_bg-muted-pressed: var(
+        --eds-background-interactive-success-muted-pressed
+      );
+      --_bg-emphasis: var(
+        --eds-background-interactive-success-emphasis-default
+      );
+      --_bg-emphasis-hover: var(
+        --eds-background-interactive-success-emphasis-hover
+      );
+      --_bg-emphasis-pressed: var(
+        --eds-background-interactive-success-emphasis-pressed
+      );
+      --_text: var(--eds-text-success);
+      --_icon: var(--eds-icon-success);
+      --_border-interactive: var(
+        --eds-border-interactive-success-emphasis-default
+      );
+    }
+
+    &[data-color-appearance='info'] {
+      --_bg-muted: var(--eds-background-interactive-info-muted-default);
+      --_bg-muted-hover: var(--eds-background-interactive-info-muted-hover);
+      --_bg-muted-pressed: var(--eds-background-interactive-info-muted-pressed);
+      --_bg-emphasis: var(--eds-background-interactive-info-emphasis-default);
+      --_bg-emphasis-hover: var(
+        --eds-background-interactive-info-emphasis-hover
+      );
+      --_bg-emphasis-pressed: var(
+        --eds-background-interactive-info-emphasis-pressed
+      );
+      --_text: var(--eds-text-info);
+      --_icon: var(--eds-icon-info);
+      --_border-interactive: var(
+        --eds-border-interactive-info-emphasis-default
+      );
+    }
+
+    &[data-color-appearance='warning'] {
+      --_bg-muted: var(--eds-background-interactive-warning-muted-default);
+      --_bg-muted-hover: var(--eds-background-interactive-warning-muted-hover);
+      --_bg-muted-pressed: var(
+        --eds-background-interactive-warning-muted-pressed
+      );
+      --_bg-emphasis: var(
+        --eds-background-interactive-warning-emphasis-default
+      );
+      --_bg-emphasis-hover: var(
+        --eds-background-interactive-warning-emphasis-hover
+      );
+      --_bg-emphasis-pressed: var(
+        --eds-background-interactive-warning-emphasis-pressed
+      );
+      --_text: var(--eds-text-warning);
+      --_icon: var(--eds-icon-warning);
+      --_border-interactive: var(
+        --eds-border-interactive-warning-emphasis-default
+      );
+    }
+
+    &[data-color-appearance='danger'] {
+      --_bg-muted: var(--eds-background-interactive-danger-muted-default);
+      --_bg-muted-hover: var(--eds-background-interactive-danger-muted-hover);
+      --_bg-muted-pressed: var(
+        --eds-background-interactive-danger-muted-pressed
+      );
+      --_bg-emphasis: var(--eds-background-interactive-danger-emphasis-default);
+      --_bg-emphasis-hover: var(
+        --eds-background-interactive-danger-emphasis-hover
+      );
+      --_bg-emphasis-pressed: var(
+        --eds-background-interactive-danger-emphasis-pressed
+      );
+      --_text: var(--eds-text-danger);
+      --_icon: var(--eds-icon-danger);
+      --_border-interactive: var(
+        --eds-border-interactive-danger-emphasis-default
+      );
+    }
+
     /* ===== DEFAULT VARIANT (solid muted fill) ===== */
 
     &[data-variant='default'] {
-      color: var(--eds-color-text-subtle);
-      background-color: var(--eds-color-bg-fill-muted-default);
+      background-color: var(--_bg-muted);
       outline: none;
     }
 
     &[data-variant='default']:hover {
-      background-color: var(--eds-color-bg-fill-muted-hover);
+      background-color: var(--_bg-muted-hover);
     }
 
     &[data-variant='default']:active {
-      background-color: var(--eds-color-bg-fill-muted-active);
+      background-color: var(--_bg-muted-pressed);
     }
 
     /* ===== OUTLINED VARIANT (border + transparent bg) ===== */
 
     &[data-variant='outlined'] {
-      color: var(--eds-color-text-subtle);
       background-color: transparent;
       outline: var(--eds-border-width-default, 1px) solid
-        var(--eds-color-border-strong);
+        var(--_border-interactive);
       outline-offset: calc(-1 * var(--eds-border-width-default, 1px));
     }
 
     &[data-variant='outlined']:hover {
-      background-color: var(--eds-color-bg-fill-muted-hover);
+      background-color: var(--_bg-muted-hover);
     }
 
     &[data-variant='outlined']:active {
-      background-color: var(--eds-color-bg-fill-muted-active);
+      background-color: var(--_bg-muted-pressed);
     }
 
     /* ===== HIGH-CONTRAST VARIANT (emphasis fill + light text) ===== */
 
     &[data-variant='high-contrast'] {
-      color: var(--eds-color-text-strong-on-emphasis);
-      background-color: var(--eds-color-bg-fill-emphasis-default);
+      --_text: var(--eds-text-on-emphasis);
+      --_icon: var(--eds-icon-on-emphasis);
+
+      background-color: var(--_bg-emphasis);
       outline: none;
     }
 
     &[data-variant='high-contrast']:hover {
-      background-color: var(--eds-color-bg-fill-emphasis-hover);
+      background-color: var(--_bg-emphasis-hover);
     }
 
     &[data-variant='high-contrast']:active {
-      background-color: var(--eds-color-bg-fill-emphasis-active);
+      background-color: var(--_bg-emphasis-pressed);
     }
 
     /* ===== FOCUS STATE ===== */
 
     &:focus-visible {
       box-shadow:
-        0 0 0 var(--eds-sizing-stroke-thin) var(--eds-color-bg-canvas),
+        0 0 0 var(--eds-sizing-stroke-thin) var(--eds-background-canvas),
         0 0 0 calc(var(--eds-sizing-stroke-thin) * 2)
-          var(--eds-color-border-focus);
+          var(--eds-border-interactive-focus);
     }
 
     /* ===== ICONS ===== */
@@ -115,6 +243,7 @@
       flex-shrink: 0;
       margin-block: calc(-1 * var(--_padding-adjusted));
       margin-inline: calc(-1 * var(--_padding-adjusted) / 2);
+      color: var(--_icon);
     }
   }
 }