From 3a1b1b9c71841e82e2761251e8ab187bce91281d Mon Sep 17 00:00:00 2001
From: Josefina Mancilla <32556167+jnm2377@users.noreply.github.com>
Date: Fri, 22 Apr 2022 15:21:33 -0500
Subject: [PATCH] fix(ComponentDemo): reset contextual tokens (#2899)

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
---
 .../ComponentDemo/ComponentDemo.module.scss   | 52 +++++++++++++++++++
 1 file changed, 52 insertions(+)

diff --git a/src/components/ComponentDemo/ComponentDemo.module.scss b/src/components/ComponentDemo/ComponentDemo.module.scss
index 8f323d1be91..63f75d977d2 100644
--- a/src/components/ComponentDemo/ComponentDemo.module.scss
+++ b/src/components/ComponentDemo/ComponentDemo.module.scss
@@ -319,6 +319,19 @@ body[data-live-preview-theme='White']
 body[data-live-preview-theme='White'] ul[class^='cds--overflow-menu-options'],
 .white {
   @include theme(themes.$white);
+  --cds-layer: var(--cds-layer-01);
+  --cds-layer-active: var(--cds-layer-active-01);
+  --cds-layer-hover: var(--cds-layer-hover-01);
+  --cds-layer-selected: var(--cds-layer-selected-01);
+  --cds-layer-selected-hover: var(--cds-layer-selected-hover-01);
+  --cds-layer-accent: var(--cds-layer-accent-01);
+  --cds-layer-accent-hover: var(--cds-layer-accent-hover-01);
+  --cds-layer-accent-active: var(--cds-layer-accent-active-01);
+  --cds-field: var(--cds-field-01);
+  --cds-field-hover: var(--cds-field-hover-01);
+  --cds-border-subtle: var(--cds-border-subtle-01);
+  --cds-border-subtle-selected: var(--cds-border-subtle-selected-01);
+  --cds-border-strong: var(--cds-border-strong-01);
 }
 
 body[data-live-preview-theme='Gray 10'] [class^='cds--tooltip'],
@@ -327,6 +340,19 @@ body[data-live-preview-theme='Gray 10']
 body[data-live-preview-theme='Gray 10'] ul[class^='cds--overflow-menu-options'],
 .g10 {
   @include theme(themes.$g10);
+  --cds-layer: var(--cds-layer-01);
+  --cds-layer-active: var(--cds-layer-active-01);
+  --cds-layer-hover: var(--cds-layer-hover-01);
+  --cds-layer-selected: var(--cds-layer-selected-01);
+  --cds-layer-selected-hover: var(--cds-layer-selected-hover-01);
+  --cds-layer-accent: var(--cds-layer-accent-01);
+  --cds-layer-accent-hover: var(--cds-layer-accent-hover-01);
+  --cds-layer-accent-active: var(--cds-layer-accent-active-01);
+  --cds-field: var(--cds-field-01);
+  --cds-field-hover: var(--cds-field-hover-01);
+  --cds-border-subtle: var(--cds-border-subtle-01);
+  --cds-border-subtle-selected: var(--cds-border-subtle-selected-01);
+  --cds-border-strong: var(--cds-border-strong-01);
 }
 
 body[data-live-preview-theme='Gray 90'] [class^='cds--tooltip'],
@@ -335,6 +361,19 @@ body[data-live-preview-theme='Gray 90']
 body[data-live-preview-theme='Gray 90'] ul[class^='cds--overflow-menu-options'],
 .g90 {
   @include theme(themes.$g90);
+  --cds-layer: var(--cds-layer-01);
+  --cds-layer-active: var(--cds-layer-active-01);
+  --cds-layer-hover: var(--cds-layer-hover-01);
+  --cds-layer-selected: var(--cds-layer-selected-01);
+  --cds-layer-selected-hover: var(--cds-layer-selected-hover-01);
+  --cds-layer-accent: var(--cds-layer-accent-01);
+  --cds-layer-accent-hover: var(--cds-layer-accent-hover-01);
+  --cds-layer-accent-active: var(--cds-layer-accent-active-01);
+  --cds-field: var(--cds-field-01);
+  --cds-field-hover: var(--cds-field-hover-01);
+  --cds-border-subtle: var(--cds-border-subtle-01);
+  --cds-border-subtle-selected: var(--cds-border-subtle-selected-01);
+  --cds-border-strong: var(--cds-border-strong-01);
 }
 
 body[data-live-preview-theme='Gray 100'] [class^='cds--tooltip'],
@@ -344,6 +383,19 @@ body[data-live-preview-theme='Gray 100']
   ul[class^='cds--overflow-menu-options'],
 .g100 {
   @include theme(themes.$g100);
+  --cds-layer: var(--cds-layer-01);
+  --cds-layer-active: var(--cds-layer-active-01);
+  --cds-layer-hover: var(--cds-layer-hover-01);
+  --cds-layer-selected: var(--cds-layer-selected-01);
+  --cds-layer-selected-hover: var(--cds-layer-selected-hover-01);
+  --cds-layer-accent: var(--cds-layer-accent-01);
+  --cds-layer-accent-hover: var(--cds-layer-accent-hover-01);
+  --cds-layer-accent-active: var(--cds-layer-accent-active-01);
+  --cds-field: var(--cds-field-01);
+  --cds-field-hover: var(--cds-field-hover-01);
+  --cds-border-subtle: var(--cds-border-subtle-01);
+  --cds-border-subtle-selected: var(--cds-border-subtle-selected-01);
+  --cds-border-strong: var(--cds-border-strong-01);
 }
 
 //---------------------------------------