fix 2-tone color issue

Author: chrismoroney

assets/css/content-pages.css

@@ -32,7 +32,7 @@
     margin-top: -1px !important;
 }
 html[theme='dark'] .tab-row {
-    background-color: var(--arm-black); /* rgba(163, 168, 174,1); #2A2B2D; */
+    background-color: var(--content-page-surface);
 }
 
 .tab-row.active {
@@ -72,7 +72,7 @@ html[theme='dark'] .tab-row.active {
 
 html[theme='dark'] .tab-right-card {
     border-color: rgba(163, 168, 174,0.25); /* #A3A8AE at 25% transparency */
-    background-color: rgb(23,25,27);  /* CLOSE to this, but hard coded as they are close to background gradient var(--arm-color-base) at 75% transparency */
+    background-color: var(--content-page-surface);
 }
 html[theme='dark'] .tab-right-card.active {
     border-color: var(--arm-light-blue);
@@ -141,7 +141,7 @@ div.github-div {
 
 html[theme='dark'] div.github-div {
     border-color: rgba(163, 168, 174,0.25); /* #A3A8AE at 25% transparency */
-    background-color: var(--ads-ui-ink-100);
+    background-color: var(--content-page-surface);
 
 }
 

assets/css/content.css

@@ -17,7 +17,8 @@
 
 /* Box around content (learning paths and tools) */
 html[theme="dark"] #main {
-    background-color: var(--ads-ui-ink-90);
+    --content-page-surface: var(--ads-ui-ink-90);
+    background-color: var(--ads-ui-ink-100);
 }
 
 div.content-box {
@@ -32,7 +33,7 @@ div.content-box {
     border-radius: 5px;
 
     border-color: rgba(163, 168, 174,0.25); /* #A3A8AE at 25% transparency */
-    background-color: var(--ads-ui-ink-100);
+    background-color: var(--content-page-surface);
 }
 html[theme="light"] div.content-box {
     background-color: white;

themes/arm-design-system-hugo-theme/layouts/partials/learning-paths/generated-summary-faq.html

@@ -35,7 +35,7 @@ <h3>Summary</h3>
 									<ads-cta-button class="ai-assisted-summary-faq-close" level="primary" type="button" sr-label="close">Close</ads-cta-button>
 								</div>
 								<div slot="trigger">
-									<ads-button class="generated-summary-faq__info" level="tertiary" size="small" is-circular="" type="button" sr-label="Learn what AI-assisted means">?</ads-button>
+									<ads-button class="generated-summary-faq__info" level="secondary" size="small" is-circular="" type="button" sr-label="Learn what AI-assisted means">?</ads-button>
 								</div>
 							</ads-modal>
 						</span>
@@ -63,7 +63,7 @@ <h3>Frequently asked questions</h3>
 									<ads-cta-button class="ai-assisted-summary-faq-close" level="primary" type="button" sr-label="close">Close</ads-cta-button>
 								</div>
 								<div slot="trigger">
-									<ads-button class="generated-summary-faq__info" level="tertiary" size="small" is-circular="" type="button" sr-label="Learn what AI-assisted means">?</ads-button>
+									<ads-button class="generated-summary-faq__info" level="secondary" size="small" is-circular="" type="button" sr-label="Learn what AI-assisted means">?</ads-button>
 								</div>
 							</ads-modal>
 						</span>