diff --git a/src/pages/components/code-snippet/style.mdx b/src/pages/components/code-snippet/style.mdx
index 83a8b017c39..831c6b62c8c 100755
--- a/src/pages/components/code-snippet/style.mdx
+++ b/src/pages/components/code-snippet/style.mdx
@@ -12,15 +12,13 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility']
 
 | Class                         | Property         | Color token        |
 | ----------------------------- | ---------------- | ------------------ |
-| `.bx--snippet`                | background       | `$field-01`        |
-| `.bx--snippet`                | text color       | `$text-01`         |
-| `.bx--snippet__icon`          | svg              | `$icon-01`         |
-| `.bx--copy-btn:hover`         | background-color | `$hover-ui`        |
+| `.bx--snippet`                | background       | `$field`           |
+| `.bx--snippet`                | text color       | `$text-primary`    |
+| `.bx--snippet__icon`          | svg              | `$icon-primary`    |
+| `.bx--copy-btn:hover`         | background-color | `$layer-hover`     |   
 | `.bx--copy-btn:focus`         | border           | `$focus`           |
-| `.bx--copy-btn:active`        | background-color | `$active-ui`       |
-| `.bx--snippet--light`         | background-color | `$field-02`        |
-| `.bx--copy-btn--light:hover`  | background-color | `$hover-light-ui`  |
-| `.bx--copy-btn--light:active` | background-color | `$active-light-ui` |
+| `.bx--copy-btn:active`        | background-color | `$layer-active`    |
+
 
 <Row>
 <Column colLg={8}>
@@ -36,15 +34,13 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility']
 
 | Class                                                                | Property         | Color token        |
 | -------------------------------------------------------------------- | ---------------- | ------------------ |
-| `.bx--snippet`                                                       | background       | `$field-01`        |
-| `.bx--snippet`                                                       | text color       | `$text-01`         |
-| `.bx--snippet__icon`                                                 | svg              | `$icon-01`         |
-| `.bx--copy-btn:hover` <br/> `.bx--snippet-btn:hover`                 | background-color | `$hover-ui`        |
+| `.bx--snippet`                                                       | background       | `$field`           |
+| `.bx--snippet`                                                       | text color       | `$text-primary`    |
+| `.bx--snippet__icon`                                                 | svg              | `$icon-primary`    |
+| `.bx--copy-btn:hover` <br/> `.bx--snippet-btn:hover`                 | background-color | `$layer-hover`     |
 | `.bx--copy-btn:focus` <br/> `.bx--snippet-btn:focus`                 | border           | `$focus`           |
-| `.bx--copy-btn:active` <br/> `.bx--snippet-btn:active`               | background-color | `$active-ui`       |
-| `.bx--snippet--light`                                                | background-color | `$field-02`        |
-| `.bx--copy-btn--light:hover` <br/> `.bx--snippet-btn--light:hover`   | background-color | `$hover-light-ui`  |
-| `.bx--copy-btn--light:active` <br/> `.bx--snippet-btn--light:active` | background-color | `$active-light-ui` |
+| `.bx--copy-btn:active` <br/> `.bx--snippet-btn:active`               | background-color | `$layer-active`    |
+
 
 <Row>
 <Column colLg={8}>
@@ -72,14 +68,12 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility']
 
 | Class                                            | Property         | Color token        |
 | ------------------------------------------------ | ---------------- | ------------------ |
-| `.bx--snippet--inline`                           | background-color | `$field-01`        |
-| `.bx--snippet--inline`                           | color            | `$text-01`         |
-| `.bx--snippet--inline:hover`                     | background-color | `$hover-ui`        |
+| `.bx--snippet--inline`                           | background-color | `$field`           |
+| `.bx--snippet--inline`                           | color            | `$text-primary`    |
+| `.bx--snippet--inline:hover`                     | background-color | `$field-hover`     |
 | `.bx--snippet--inline:focus`                     | focus            | `$focus`           |
-| `.bx--snippet--inline:active`                    | background-color | `$active-ui`       |
-| `.bx--snippet--inline.bx--snippet--light`        | background-color | `$field-02`        |
-| `.bx--snippet--inline:hover.bx--snippet--light`  | background-color | `$hover-light-ui`  |
-| `.bx--snippet--inline:active.bx--snippet--light` | background-color | `$active-light-ui` |
+| `.bx--snippet--inline:active`                    | background-color | `$layer-active`    |
+
 
 <Row>
 <Column colLg={8}>