@hashicorp/design-system-components 6.2.0 → 6.3.0-rc-20260514101332

package/dist/styles/components/card/container.scss

@@ -7,14 +7,15 @@
 // CARD COMPONENT > CONTAINER
 //
 
+@use "../../mixins/carbonization" as *;
+
 $hds-card-container-style: ("surface", "elevation");
 $hds-card-container-levels: ("base", "mid", "high");
-$hds-card-container-border-radius: var(--token-border-radius-medium);
 
 .hds-card__container {
   position: relative;
-  background-color: #fff;
-  border-radius: $hds-card-container-border-radius;
+  background-color: var(--token-card-surface-color-primary);
+  border-radius: var(--token-border-radius-medium);
 }
 
 // LEVEL (elevation style as "drop" + "border" shadow effects)
@@ -33,6 +34,10 @@ $hds-card-container-border-radius: var(--token-border-radius-medium);
     .hds-card__container--hover-level-#{$style}-#{$level}:hover,
     .hds-card__container--hover-level-#{$style}-#{$level}.mock-hover {
       box-shadow: var(--token-#{$style}-#{$level}-box-shadow);
+
+      @include hds-apply-only-if-carbon() {
+        background-color: var(--token-color-surface-interactive-hover);
+      }
     }
   }
 
@@ -47,11 +52,11 @@ $hds-card-container-border-radius: var(--token-border-radius-medium);
 // BACKGROUND
 
 .hds-card__container--background-neutral-primary {
-  background-color: var(--token-color-surface-primary);
+  background-color: var(--token-card-surface-color-primary);
 }
 
 .hds-card__container--background-neutral-secondary {
-  background-color: var(--token-color-surface-faint);
+  background-color: var(--token-card-surface-color-secondary);
 }
 
 // OVERFLOW

package/dist/styles/components/code-block/index.scss

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2021, 2025
+ * Copyright IBM Corp. 2021, 2026
  * SPDX-License-Identifier: MPL-2.0
  */
 
@@ -8,6 +8,7 @@
 //
 
 @use "../../mixins/focus-ring" as *;
+@use "../../mixins/carbonization" as *;
 
 // Note: "theme" contains just color variables and syntax highlighting styles
 @use "theme";
@@ -21,12 +22,16 @@ $hds-code-block-code-footer-height: 48px;
 
 .hds-code-block {
   position: relative;
-  color: var(--hds-code-block-color-foreground-primary);
-  background-color: var(--hds-code-block-color-surface-primary);
-  border: 1px solid var(--hds-code-block-color-border-strong);
+  color: var(--token-code-block-foreground-color-primary);
+  background-color: var(--token-code-block-surface-color-primary);
+  border: 1px solid var(--token-code-block-border-color-strong);
 
   pre,
   code {
+    // Note: Prism.js calculates line highlighting based on either the pre or code element depending on the presence of line numbers,
+    // Because of this font styles need to be the set on both elements.
+    font-size: var(--token-code-block-typography-font-size);
+    font-family: var(--token-typography-code-200-font-family);
     line-height: 1.4286;
     white-space: pre;
     text-align: left;
@@ -66,11 +71,11 @@ $hds-code-block-code-footer-height: 48px;
 // Header (contains title & description)
 
 .hds-code-block__title {
-  color: var(--hds-code-block-color-foreground-primary);
+  color: var(--token-code-block-foreground-color-primary);
 }
 
 .hds-code-block__description {
-  color: var(--hds-code-block-color-foreground-faint);
+  color: var(--token-code-block-foreground-color-faint);
 }
 
 .hds-code-block__header {
@@ -78,8 +83,8 @@ $hds-code-block-code-footer-height: 48px;
   flex-direction: column;
   gap: 4px;
   padding: 8px $hds-code-block-code-padding;
-  background-color: var(--hds-code-block-color-surface-faint);
-  border-bottom: 1px solid var(--hds-code-block-color-border-primary);
+  background-color: var(--token-code-block-surface-color-faint);
+  border-bottom: 1px solid var(--token-code-block-border-color-primary);
   border-top-left-radius: inherit;
   border-top-right-radius: inherit;
 
@@ -103,7 +108,7 @@ $hds-code-block-code-footer-height: 48px;
 
   // Default styling for bare HTML links not using HDS::Link components
   a:not([class*="hds-"]) {
-    color: var(--hds-code-block-color-foreground-action);
+    color: var(--token-code-block-foreground-color-action);
 
     &:focus,
     &:focus-visible {
@@ -140,54 +145,57 @@ $hds-code-block-code-footer-height: 48px;
   border-radius: inherit;
 
   ::selection {
-    color: var(--hds-code-block-color-foreground-selection);
-    background-color: var(--hds-code-block-color-surface-selection);
+    color: var(--token-code-block-foreground-color-selection);
+    background-color: var(--token-code-block-surface-color-selection);
+
+    @include hds-apply-only-if-carbon() {
+      color: revert;
+      background-color: revert;
+    }
   }
 
   code {
     position: relative;
     display: inline-block;
     padding-right: $hds-code-block-code-padding;
-    font-size: 0.8125rem;
-    font-family: var(--token-typography-code-200-font-family);
   }
 }
 
 // General dark button styles
 .hds-code-block__height-toggle-button,
-.hds-code-block__copy-button {
+.hds-code-block__copy-button.hds-copy-button {
   // Overriding default colors
-  color: var(--hds-code-block-color-foreground-primary);
-  background-color: var(--hds-code-block-color-surface-faint);
-  border: 1px solid var(--hds-code-block-color-border-strong);
+  color: var(--token-code-block-foreground-color-primary);
+  background-color: var(--token-code-block-button-surface-color-default);
+  border: 1px solid var(--token-code-block-border-color-strong);
 
   &:hover,
   &.mock-hover {
-    color: var(--hds-code-block-color-foreground-primary);
-    background-color: var(--hds-code-block-color-surface-primary);
-    border-color: var(--hds-code-block-color-border-strong);
+    color: var(--token-code-block-foreground-color-primary);
+    background-color: var(--token-code-block-button-surface-color-hover);
+    border-color: var(--token-code-block-border-color-strong);
   }
 
   &:active,
   &.mock-active {
-    color: var(--hds-code-block-color-foreground-primary);
-    background-color: var(--hds-code-block-color-surface-interactive-active);
+    color: var(--token-code-block-foreground-color-primary);
+    background-color: var(--token-code-block-button-surface-color-active);
   }
 
   &:focus,
   &.mock-focus,
   &:focus-visible {
-    color: var(--hds-code-block-color-foreground-primary);
-    background-color: var(--hds-code-block-color-surface-faint);
-    border-color: var(--hds-code-block-color-focus-action-internal);
+    color: var(--token-code-block-foreground-color-primary);
+    background-color: var(--token-code-block-button-surface-color-default);
+    border-color: var(--token-code-block-focus-ring-color-action-internal);
 
     &::before {
-      border-color: var(--hds-code-block-color-focus-action-external);
+      border-color: var(--token-code-block-focus-ring-color-action-external);
     }
   }
 
   .hds-icon {
-    color: var(--hds-code-block-color-foreground-primary);
+    color: var(--token-code-block-foreground-color-primary);
   }
 }
 
@@ -199,13 +207,13 @@ $hds-code-block-code-footer-height: 48px;
 
   &.hds-copy-button--status-success {
     .hds-icon {
-      color: var(--hds-code-block-color-foreground-success);
+      color: var(--token-color-foreground-success);
     }
   }
 
   &.hds-copy-button--status-error {
     .hds-icon {
-      color: var(--hds-code-block-color-foreground-critical);
+      color: var(--token-color-foreground-critical);
     }
   }
 }
@@ -242,7 +250,7 @@ $hds-code-block-code-footer-height: 48px;
       min-width: $hds-code-block-line-numbers-width;
       min-height: 100%;
       padding: $hds-code-block-code-padding 0;
-      border-right: 1px solid var(--hds-code-block-color-border-primary);
+      border-right: 1px solid var(--token-code-block-border-color-primary);
       user-select: none;
       pointer-events: none;
 
@@ -269,11 +277,15 @@ $hds-code-block-code-footer-height: 48px;
     position: absolute;
     right: 0;
     left: -$hds-code-block-code-padding;
-    background-color: var(--hds-code-block-color-line-highlight);
-    border: solid var(--hds-code-block-color-line-highlight-border);
+    background-color: var(--token-code-block-line-highlight-surface-color);
+    border: solid var(--token-code-block-line-highlight-border-color);
     border-width: 1px 0 1px 4px;
     mix-blend-mode: screen;
     pointer-events: none;
+
+    @include hds-apply-only-if-carbon() {
+      mix-blend-mode: normal;
+    }
   }
 
   @media print {
@@ -327,9 +339,18 @@ $hds-code-block-code-footer-height: 48px;
     display: block;
     height: $hds-code-block-code-footer-height;
     margin: 0 0 -#{$hds-code-block-code-padding} -1000px; // cover line highlights when line numbers are enabled
-    background: linear-gradient(360deg, #0d0e12 37.07%, rgba(13, 14, 18, 25%) 100%);
+    background: linear-gradient(
+      360deg,
+      var(--token-code-block-surface-color-primary) 37.07%,
+      var(--token-code-block-surface-color-primary-with-alpha) 100%
+    );
     content: "";
     pointer-events: none;
+
+    @include hds-apply-only-if-carbon() {
+      bottom: -$hds-code-block-code-padding - 2px; // account for transparent border
+      height: $hds-code-block-code-footer-height + 2px; // account for transparent border
+    }
   }
 
   .line-numbers .line-numbers-rows {

package/dist/styles/components/code-block/theme.scss

@@ -6,102 +6,56 @@
 // THEMING
 
 .hds-code-block--theme-dark {
-  // COLORS
-
-  // Descriptive color names:
-
-  --hds-code-block-color-blue: #2d8eff;
-  --hds-code-block-color-cyan: #32fff7;
-  --hds-code-block-color-green: #86ff13;
-  --hds-code-block-color-orange: #ffa800;
-  --hds-code-block-color-purple: #c76cff;
-  --hds-code-block-color-red: #ff3b20;
-
-  // Semantic color names:
-
-  // Base UI colors:
-  --hds-code-block-color-foreground-primary: #d5d7db;
-  --hds-code-block-color-foreground-faint: #b2b6bd;
-  --hds-code-block-color-surface-primary: #0d0e12;
-  --hds-code-block-color-surface-faint: #15181e;
-  // status ----
-  --hds-code-block-color-foreground-success: #009241;
-  --hds-code-block-color-foreground-critical: #ef3016;
-  // interactive ---
-  --hds-code-block-color-foreground-interactive: #dedfe3;
-  --hds-code-block-color-foreground-interactive-hover: #fff;
-  --hds-code-block-color-foreground-interactive-active: #f1f2f3;
-  --hds-code-block-color-surface-interactive-active: #2b303c;
-  // actions ---
-  --hds-code-block-color-foreground-action: #2b89ff;
-  --hds-code-block-color-foreground-action-hover: #389aff;
-  --hds-code-block-color-foreground-action-active: #4ca1ff;
-  // borders
-  --hds-code-block-color-border-strong: rgba(178, 182, 189, 40%); // #b2b6bd66
-  --hds-code-block-color-border-primary: rgba(178, 182, 189, 20%); // #b2b6bd33
-  // selection
-  --hds-code-block-color-foreground-selection: #0d0e12;
-  --hds-code-block-color-surface-selection: #86ff13;
-
-  // CodeBlock UI:
-  // lines of code - highlighted ----
-  --hds-code-block-color-line-highlight: rgba(0, 74, 222, 20%);
-  --hds-code-block-color-line-highlight-border: #1555d4;
-  // Copy Button
-  // TODO: Remove focus tokens once global tokens for dark themes are implemented
-  --hds-code-block-color-focus-action-internal: #9bc7fd;
-  --hds-code-block-color-focus-action-external: #0d69f2;
-
-  // Syntax highlighting tokens:
+  // Syntax highlighting tokens reference design tokens:
   // general ----
-  --hds-code-block-color-token: var(--hds-code-block-color-foreground-primary);
+  --hds-code-block-color-token: var(--token-code-block-foreground-color-primary);
   // specific ----
-  --hds-code-block-color-atrule: var(--hds-code-block-color-blue);
-  --hds-code-block-color-code-block-attr-name: var(--hds-code-block-color-blue);
-  --hds-code-block-color-attr-value: var(--hds-code-block-color-blue);
-  --hds-code-block-color-boolean: var(--hds-code-block-color-purple);
-  --hds-code-block-color-builtin: var(--hds-code-block-color-orange);
-  --hds-code-block-color-char: var(--hds-code-block-color-orange);
-  --hds-code-block-color-class-name: var(--hds-code-block-color-blue);
-  --hds-code-block-color-comment: var(--hds-code-block-color-foreground-faint);
-  --hds-code-block-color-control: var(--hds-code-block-color-cyan);
-  --hds-code-block-color-constant: var(--hds-code-block-color-purple);
-  --hds-code-block-color-deleted: var(--hds-code-block-color-red);
-  --hds-code-block-color-entity: var(--hds-code-block-color-green);
-  --hds-code-block-color-function: var(--hds-code-block-color-blue);
-  --hds-code-block-color-important: var(--hds-code-block-color-red);
-  --hds-code-block-color-keyword: var(--hds-code-block-color-green);
-  --hds-code-block-color-namespace: var(--hds-code-block-color-red);
-  --hds-code-block-color-number: var(--hds-code-block-color-purple);
-  --hds-code-block-color-operator: var(--hds-code-block-color-cyan);
-  --hds-code-block-color-prolog: var(--hds-code-block-color-foreground-primary);
-  --hds-code-block-color-property: var(--hds-code-block-color-blue);
-  --hds-code-block-color-punctuation: var(--hds-code-block-color-foreground-primary);
-  --hds-code-block-color-regex: var(--hds-code-block-color-orange);
-  --hds-code-block-color-script: var(--hds-code-block-color-foreground-primary);
-  --hds-code-block-color-selector: var(--hds-code-block-color-green);
-  --hds-code-block-color-string: var(--hds-code-block-color-orange);
-  --hds-code-block-color-symbol: var(--hds-code-block-color-orange);
-  --hds-code-block-color-tag: var(--hds-code-block-color-green);
-  --hds-code-block-color-url: var(--hds-code-block-color-cyan);
+  --hds-code-block-color-atrule: var(--token-code-block-syntax-highlight-color-blue);
+  --hds-code-block-color-code-block-attr-name: var(--token-code-block-syntax-highlight-color-blue);
+  --hds-code-block-color-attr-value: var(--token-code-block-syntax-highlight-color-blue);
+  --hds-code-block-color-boolean: var(--token-code-block-syntax-highlight-color-purple);
+  --hds-code-block-color-builtin: var(--token-code-block-syntax-highlight-color-orange);
+  --hds-code-block-color-char: var(--token-code-block-syntax-highlight-color-orange);
+  --hds-code-block-color-class-name: var(--token-code-block-syntax-highlight-color-blue);
+  --hds-code-block-color-comment: var(--token-code-block-foreground-color-faint);
+  --hds-code-block-color-control: var(--token-code-block-syntax-highlight-color-cyan);
+  --hds-code-block-color-constant: var(--token-code-block-syntax-highlight-color-purple);
+  --hds-code-block-color-deleted: var(--token-code-block-syntax-highlight-color-red);
+  --hds-code-block-color-entity: var(--token-code-block-syntax-highlight-color-green);
+  --hds-code-block-color-function: var(--token-code-block-syntax-highlight-color-blue);
+  --hds-code-block-color-important: var(--token-code-block-syntax-highlight-color-red);
+  --hds-code-block-color-keyword: var(--token-code-block-syntax-highlight-color-green);
+  --hds-code-block-color-namespace: var(--token-code-block-syntax-highlight-color-red);
+  --hds-code-block-color-number: var(--token-code-block-syntax-highlight-color-purple);
+  --hds-code-block-color-operator: var(--token-code-block-syntax-highlight-color-cyan);
+  --hds-code-block-color-prolog: var(--token-code-block-foreground-color-primary);
+  --hds-code-block-color-property: var(--token-code-block-syntax-highlight-color-blue);
+  --hds-code-block-color-punctuation: var(--token-code-block-foreground-color-primary);
+  --hds-code-block-color-regex: var(--token-code-block-syntax-highlight-color-orange);
+  --hds-code-block-color-script: var(--token-code-block-foreground-color-primary);
+  --hds-code-block-color-selector: var(--token-code-block-syntax-highlight-color-green);
+  --hds-code-block-color-string: var(--token-code-block-syntax-highlight-color-orange);
+  --hds-code-block-color-symbol: var(--token-code-block-syntax-highlight-color-orange);
+  --hds-code-block-color-tag: var(--token-code-block-syntax-highlight-color-green);
+  --hds-code-block-color-url: var(--token-code-block-syntax-highlight-color-cyan);
   // language-scoped:
   // css ----
-  --hds-code-block-color-lang-css: var(--hds-code-block-color-purple);
-  --hds-code-block-color-lang-css-token: var(--hds-code-block-color-green);
-  --hds-code-block-color-lang-css-atrule: var(--hds-code-block-color-purple);
-  --hds-code-block-color-lang-css-entity: var(--hds-code-block-color-blue);
-  --hds-code-block-color-lang-css-function: var(--hds-code-block-color-cyan);
-  --hds-code-block-color-lang-css-property: var(--hds-code-block-color-cyan);
-  --hds-code-block-color-lang-css-punctuation: var(--hds-code-block-color-orange);
-  --hds-code-block-color-lang-css-not-atrule: var(--hds-code-block-color-foreground-primary);
-  --hds-code-block-color-lang-css-selector: var(--hds-code-block-color-blue);
-  --hds-code-block-color-lang-css-url: var(--hds-code-block-color-orange);
+  --hds-code-block-color-lang-css: var(--token-code-block-syntax-highlight-color-purple);
+  --hds-code-block-color-lang-css-token: var(--token-code-block-syntax-highlight-color-green);
+  --hds-code-block-color-lang-css-atrule: var(--token-code-block-syntax-highlight-color-purple);
+  --hds-code-block-color-lang-css-entity: var(--token-code-block-syntax-highlight-color-blue);
+  --hds-code-block-color-lang-css-function: var(--token-code-block-syntax-highlight-color-cyan);
+  --hds-code-block-color-lang-css-property: var(--token-code-block-syntax-highlight-color-cyan);
+  --hds-code-block-color-lang-css-punctuation: var(--token-code-block-syntax-highlight-color-orange);
+  --hds-code-block-color-lang-css-not-atrule: var(--token-code-block-foreground-color-primary);
+  --hds-code-block-color-lang-css-selector: var(--token-code-block-syntax-highlight-color-blue);
+  --hds-code-block-color-lang-css-url: var(--token-code-block-syntax-highlight-color-orange);
   // javascript ----
-  --hds-code-block-color-lang-js-constant: var(--hds-code-block-color-orange);
+  --hds-code-block-color-lang-js-constant: var(--token-code-block-syntax-highlight-color-orange);
   // markup/html ----
-  --hds-code-block-color-lang-markup-attr-value: var(--hds-code-block-color-yellow);
-  --hds-code-block-color-lang-markup-entity-named: var(--hds-code-block-color-purple);
-  --hds-code-block-color-lang-markup-entity-not-named: var(--hds-code-block-color-green);
+  --hds-code-block-color-lang-markup-attr-value: var(--token-code-block-syntax-highlight-color-yellow);
+  --hds-code-block-color-lang-markup-entity-named: var(--token-code-block-syntax-highlight-color-purple);
+  --hds-code-block-color-lang-markup-entity-not-named: var(--token-code-block-syntax-highlight-color-green);
 }
 
 .hds-code-block {

package/dist/styles/components/code-editor/index.scss

@@ -1,20 +1,19 @@
 /**
- * Copyright IBM Corp. 2021, 2025
+ * Copyright IBM Corp. 2021, 2026
  * SPDX-License-Identifier: MPL-2.0
  */
 
 //
 // CODE-EDITOR
 //
-
-@use "theme";
+@use "../../mixins/carbonization" as *;
 
 .hds-code-editor {
   display: flex;
   flex-direction: column;
   overflow: hidden;
-  background-color: var(--hds-code-editor-color-surface-primary);
-  border: 1px solid var(--hds-code-editor-color-border-strong);
+  background-color: var(--token-code-block-surface-color-primary);
+  border: 1px solid var(--token-code-block-border-color-strong);
 
   &.hds-code-editor--is-standalone {
     border-radius: var(--token-border-radius-medium);
@@ -34,17 +33,27 @@
 
   // Ovverride default font-styles & match CodeBlock component font styles
   .cm-editor .cm-scroller {
-    font-size: 0.8125rem;
+    font-size: var(--token-code-block-typography-font-size);
     font-family: var(--token-typography-code-200-font-family);
   }
 
+  @include hds-apply-only-if-carbon() {
+    .cm-panel.cm-panel-lint ul li.cm-diagnostic {
+      margin-bottom: 0;
+    }
+
+    .cm-panels-bottom .cm-panel.cm-panel-lint {
+      border-top: 3px solid var(--token-code-block-border-color-primary);
+    }
+  }
+
   .hds-code-editor__header {
     display: flex;
     gap: 12px;
     align-items: start;
     padding: 16px;
-    background-color: var(--hds-code-editor-color-surface-faint);
-    border-bottom: 1px solid var(--hds-code-editor-color-border-primary);
+    background-color: var(--token-code-block-surface-color-faint);
+    border-bottom: 1px solid var(--token-code-block-border-color-primary);
   }
 
   .hds-code-editor__header-content {
@@ -54,7 +63,7 @@
   }
 
   .hds-code-editor__title {
-    color: var(--hds-code-editor-color-foreground-primary);
+    color: var(--token-code-block-foreground-color-primary);
 
     + .hds-code-editor__description {
       margin-top: 4px;
@@ -62,7 +71,7 @@
   }
 
   .hds-code-editor__description {
-    color: var(--hds-code-editor-color-foreground-faint);
+    color: var(--token-code-block-foreground-color-faint);
   }
 
   .hds-code-editor__title + .hds-code-editor__header-generic,
@@ -90,35 +99,46 @@
     align-items: center;
     justify-content: center;
     height: 164px;
-    color: var(--hds-code-editor-color-foreground-primary);
-    background-color: var(--hds-code-editor-color-surface-primary);
+    color: var(--token-code-block-foreground-color-primary);
+    background-color: var(--token-code-block-button-surface-color-default);
   }
 
   .hds-button {
-    color: var(--hds-code-editor-color-foreground-primary);
-    background-color: var(--hds-code-editor-color-surface-faint);
-    border: 1px solid var(--hds-code-editor-color-border-strong);
+    color: var(--token-code-block-foreground-color-primary);
+    background-color: var(--token-code-block-button-surface-color-default);
+    border: 1px solid var(--token-code-block-border-color-strong);
 
     &:focus,
-    &:hover {
-      background-color: var(--hds-code-editor-color-surface-primary);
-      border-color: var(--hds-code-editor-color-focus-action-internal);
+    &.mock-focus,
+    &:hover,
+    &.mock-hover {
+      background-color: var(--token-code-block-button-surface-color-hover);
+      border-color: var(--token-code-block-focus-ring-color-action-internal);
 
       &::before {
-        border-color: var(--hds-code-editor-color-focus-action-external);
+        border-color: var(--token-code-block-focus-ring-color-action-external);
       }
 
       .hds-button__icon {
-        color: var(--hds-code-editor-color-foreground-primary);
+        color: var(--token-code-block-foreground-color-primary);
+      }
+
+      @include hds-apply-only-if-carbon() {
+        border-color: transparent;
+
+        &::before {
+          border-color: transparent;
+        }
       }
     }
 
-    &:active {
-      background-color: var(--hds-code-editor-color-surface-interactive-active);
+    &:active,
+    &.mock-active {
+      background-color: var(--token-code-block-button-surface-color-active);
     }
 
     .hds-button__icon {
-      color: var(--hds-code-editor-color-foreground-primary);
+      color: var(--token-code-block-foreground-color-primary);
     }
   }
 }

package/dist/styles/components/copy/button.scss

@@ -10,23 +10,37 @@
 // mostly the hds-button but with a few style tweaks
 // so the CSS is scoped to the component class (we're not changing any of the other class names)
 .hds-copy-button {
+  color: var(--token-copy-button-foreground-color);
+  background-color: var(--token-copy-button-surface-color-default);
   cursor: pointer;
 
   .hds-button__icon {
-    color: var(--token-color-foreground-action);
+    color: var(--token-copy-button-icon-color-default);
   }
 
   &:hover,
   &.mock-hover {
+    color: var(--token-copy-button-foreground-color);
+    background-color: var(--token-copy-button-surface-color-hover);
+
     .hds-button__icon {
-      color: var(--token-color-foreground-action-hover);
+      color: var(--token-copy-button-icon-color-hover);
     }
   }
 
+  &:focus,
+  &.mock-focus {
+    color: var(--token-copy-button-foreground-color);
+    background-color: var(--token-copy-button-surface-color-focus);
+  }
+
   &:active,
   &.mock-active {
+    color: var(--token-copy-button-foreground-color);
+    background-color: var(--token-copy-button-surface-color-active);
+
     .hds-button__icon {
-      color: var(--token-color-foreground-action-active);
+      color: var(--token-copy-button-icon-color-active);
     }
   }
 

package/dist/styles/components/copy/snippet.scss

@@ -7,6 +7,7 @@
 // COPY > SNIPPET
 //
 @use "../../mixins/focus-ring" as *;
+@use "../../mixins/carbonization" as *;
 
 @mixin hds-copy-snippet-success-error() {
   &.hds-copy-snippet--status-success {
@@ -38,6 +39,10 @@
   border: 1px solid transparent;
   border-radius: var(--token-border-radius-small);
   cursor: pointer;
+
+  @include hds-apply-only-if-carbon() {
+    border: none;
+  }
 }
 
 .hds-copy-snippet--color-primary {
@@ -56,6 +61,11 @@
     color: var(--token-color-foreground-action-active);
     background-color: var(--token-color-surface-interactive-active);
     border-color: var(--token-color-border-strong);
+
+    // For Carbon themes there is a color contrast issue with foreground-action-active so foreground-primary is used instead
+    @include hds-apply-only-if-carbon() {
+      color: var(--token-color-foreground-primary);
+    }
   }
 
   @include hds-copy-snippet-success-error();
@@ -65,6 +75,13 @@
   color: var(--token-color-foreground-primary);
   background-color: transparent;
 
+  // For Carbon themes the color should always be foreground-primary except for the success or error status
+  @include hds-apply-only-if-carbon() {
+    &:not(.hds-copy-snippet--status-success, .hds-copy-snippet--status-error) .hds-copy-snippet__icon {
+      color: var(--token-color-foreground-primary);
+    }
+  }
+
   .hds-copy-snippet__icon {
     color: var(--token-color-foreground-action);
   }