style(CodeSnippet): fix tokens based on design audit (#10836)

* style(CodeSnippet): fix tokens based on design audit * fix(CodeSnippet): remove references to field token Co-authored-by: Lauren Rice <[email protected]> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Mar 1, 2022 · 65f6e8b · 65f6e8b
1 parent b79cdfb
commit 65f6e8b
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 22 deletions.
diff --git a/packages/styles/scss/components/code-snippet/_code-snippet.scss b/packages/styles/scss/components/code-snippet/_code-snippet.scss
@@ -68,17 +68,17 @@ $copy-btn-feedback: $background-inverse !default;
     display: inline;
     padding: 0;
     border: 2px solid transparent;
-    background-color: $field;
+    background-color: $layer;
     border-radius: 4px;
     color: $text-primary;
     cursor: pointer;
 
     &:hover {
-      background-color: $layer-accent;
+      background-color: $layer-hover;
     }
 
     &:active {
-      background-color: $copy-active;
+      background-color: $layer-active;
     }
 
     &:focus {
@@ -131,13 +131,13 @@ $copy-btn-feedback: $background-inverse !default;
     display: inline-block;
 
     &:hover {
-      background-color: $field;
+      background-color: $layer;
       cursor: auto;
     }
   }
 
   .#{$prefix}--snippet--light.#{$prefix}--snippet--inline.#{$prefix}--snippet--no-copy:hover {
-    background-color: $field-02;
+    background-color: $layer-hover;
     cursor: auto;
   }
 
@@ -241,7 +241,7 @@ $copy-btn-feedback: $background-inverse !default;
     width: rem(16px);
     height: 100%;
     // Safari interprets `transparent` differently, so make color token value transparent instead:
-    background-image: linear-gradient(to right, rgba($field, 0), $field);
+    background-image: linear-gradient(to right, rgba($layer, 0), $layer);
     content: '';
   }
 
@@ -271,7 +271,7 @@ $copy-btn-feedback: $background-inverse !default;
     justify-content: center;
     padding: 0;
     border: none;
-    background-color: $field;
+    background-color: $layer;
     cursor: pointer;
     outline: none;
 
@@ -290,7 +290,7 @@ $copy-btn-feedback: $background-inverse !default;
   }
 
   .#{$prefix}--snippet-button:hover {
-    background: $field-hover;
+    background: $layer-hover;
   }
 
   .#{$prefix}--snippet-button:active {
@@ -340,7 +340,7 @@ $copy-btn-feedback: $background-inverse !default;
 
     padding: $spacing-03 $spacing-05;
     border: 0;
-    background-color: $field;
+    background-color: $layer;
     color: $text-primary;
   }
 
@@ -361,12 +361,12 @@ $copy-btn-feedback: $background-inverse !default;
   }
 
   .#{$prefix}--snippet-btn--expand:hover {
-    background: $field-hover;
+    background: $layer-hover;
     color: $text-primary;
   }
 
   .#{$prefix}--snippet-btn--expand:active {
-    background-color: $copy-active;
+    background-color: $layer-active;
   }
 
   .#{$prefix}--snippet-btn--expand:focus {
@@ -387,31 +387,31 @@ $copy-btn-feedback: $background-inverse !default;
   .#{$prefix}--snippet--light .#{$prefix}--snippet-button,
   .#{$prefix}--snippet--light .#{$prefix}--btn.#{$prefix}--snippet-btn--expand,
   .#{$prefix}--snippet--light .#{$prefix}--copy-btn {
-    background-color: $field-02;
+    background-color: $layer;
   }
 
   .#{$prefix}--snippet--light.#{$prefix}--snippet--inline:hover,
   .#{$prefix}--snippet--light .#{$prefix}--snippet-button:hover,
   .#{$prefix}--snippet--light
     .#{$prefix}--btn.#{$prefix}--snippet-btn--expand:hover,
   .#{$prefix}--snippet--light .#{$prefix}--copy-btn:hover {
-    background-color: $layer-hover-02;
+    background-color: $layer-hover;
   }
 
   .#{$prefix}--snippet--light.#{$prefix}--snippet--inline:active,
   .#{$prefix}--snippet--light .#{$prefix}--snippet-button:active,
   .#{$prefix}--snippet--light
     .#{$prefix}--btn.#{$prefix}--snippet-btn--expand:active,
   .#{$prefix}--snippet--light .#{$prefix}--copy-btn:active {
-    background-color: $layer-active-02;
+    background-color: $layer-active;
   }
 
   .#{$prefix}--snippet--light.#{$prefix}--snippet--single::after,
   .#{$prefix}--snippet--light.#{$prefix}--snippet--multi
     .#{$prefix}--snippet-container
     pre::after {
     // Safari interprets `transparent` differently, so make color token value transparent instead:
-    background-image: linear-gradient(to right, rgba($field-02, 0), $field-02);
+    background-image: linear-gradient(to right, rgba($layer, 0), $layer);
   }
 
   // Skeleton State
@@ -469,13 +469,13 @@ $copy-btn-feedback: $background-inverse !default;
   .#{$prefix}--snippet__overflow-indicator--left {
     order: 0;
     margin-right: -$spacing-05;
-    background-image: linear-gradient(to left, transparent, $field);
+    background-image: linear-gradient(to left, transparent, $layer);
   }
 
   .#{$prefix}--snippet__overflow-indicator--right {
     order: 2;
     margin-left: -$spacing-05;
-    background-image: linear-gradient(to right, transparent, $field);
+    background-image: linear-gradient(to right, transparent, $layer);
   }
 
   .#{$prefix}--snippet--single .#{$prefix}--snippet__overflow-indicator--right,
@@ -507,11 +507,11 @@ $copy-btn-feedback: $background-inverse !default;
   }
 
   .#{$prefix}--snippet--light .#{$prefix}--snippet__overflow-indicator--left {
-    background-image: linear-gradient(to left, transparent, $field-02);
+    background-image: linear-gradient(to left, transparent, $layer);
   }
 
   .#{$prefix}--snippet--light .#{$prefix}--snippet__overflow-indicator--right {
-    background-image: linear-gradient(to right, transparent, $field-02);
+    background-image: linear-gradient(to right, transparent, $layer);
   }
 
   // Safari-only media query
@@ -520,11 +520,11 @@ $copy-btn-feedback: $background-inverse !default;
   @media not all and (min-resolution: 0.001dpcm) {
     @supports (-webkit-appearance: none) and (stroke-color: transparent) {
       .#{$prefix}--snippet__overflow-indicator--left {
-        background-image: linear-gradient(to left, rgba($field, 0), $field);
+        background-image: linear-gradient(to left, rgba($layer, 0), $layer);
       }
 
       .#{$prefix}--snippet__overflow-indicator--right {
-        background-image: linear-gradient(to right, rgba($field, 0), $field);
+        background-image: linear-gradient(to right, rgba($layer, 0), $layer);
       }
     }
   }

diff --git a/packages/styles/scss/components/code-snippet/_mixins.scss b/packages/styles/scss/components/code-snippet/_mixins.scss
@@ -7,6 +7,7 @@
 
 @use '../../theme' as *;
 @use '../../type' as *;
+@use '../../utilities/convert' as *;
 
 /// Code snippet base styles
 /// @access private
@@ -17,5 +18,5 @@
   position: relative;
   width: 100%;
   max-width: rem(768px);
-  background-color: $field;
+  background-color: $layer;
 }