From 3311f5aa630a9609fdd205439aba82f39cf18c6f Mon Sep 17 00:00:00 2001
From: thyhmdo <77697351+thyhmdo@users.noreply.github.com>
Date: Fri, 21 May 2021 11:56:58 -0500
Subject: [PATCH] Update style.mdx (#2331)

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
---
 src/pages/components/code-snippet/style.mdx | 40 +++++++++------------
 1 file changed, 17 insertions(+), 23 deletions(-)

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}>