From 61861a023e3661d6d002a067821fb1e839a196e3 Mon Sep 17 00:00:00 2001
From: vicky-comeau <vicky.comeau@gsoft.com>
Date: Tue, 31 Oct 2023 16:32:51 -0400
Subject: [PATCH] Fixed headers in Color

---
 apps/docs/content/tokens/semantic/color.mdx | 106 ++++++++++----------
 1 file changed, 54 insertions(+), 52 deletions(-)

diff --git a/apps/docs/content/tokens/semantic/color.mdx b/apps/docs/content/tokens/semantic/color.mdx
index ca4b62453..831b6e55d 100644
--- a/apps/docs/content/tokens/semantic/color.mdx
+++ b/apps/docs/content/tokens/semantic/color.mdx
@@ -12,129 +12,131 @@ export const tabs = [
   { title: "Dark", category: categoryKey }
 ];
 
+{/* It's important to keep the Headers with ##, with no spaces on the left so that it shows up in the aside.
+We do not want to do this for the dark mode, otherwise, we see double the headers in the aside. */}
 
 # Semantic Color
 <Tabs tabs={tabs}>
   <div>
-    ## Neutral
+## Neutral
     <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
       ["hop-neutral"]
     } />
-    ## Primary
+## Primary
     <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
       ["hop-primary"]
     } />
-    ## Success
+## Success
     <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
       ["hop-success"]
     } />
-    ## Warning
+## Warning
     <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
       ["hop-warning"]
     } />
-    ## Danger
+## Danger
     <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
       ["hop-danger"]
     } />
-    ## Information
+## Information
     <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
       ["hop-information"]
     } />
-    ## Upsell
+## Upsell
     <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
       ["hop-upsell"]
     } />
 
-    ## Decorative
-    ### Decorative - Option 1
+## Decorative
+    ### Option 1
     <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
       ["hop-decorative-option1"]
     } />
-    ### Decorative - Option 2
+    ### Option 2
     <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
       ["hop-decorative-option2"]
     } />
-    ### Decorative - Option 3
+    ### Option 3
     <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
       ["hop-decorative-option3"]
     } />
-    ### Decorative - Option 4
+    ### Option 4
     <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
       ["hop-decorative-option4"]
     } />
-    ### Decorative - Option 5
+    ### Option 5
     <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
       ["hop-decorative-option5"]
     } />
-    ### Decorative - Option 6
+    ### Option 6
     <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
       ["hop-decorative-option6"]
     } />
-    ### Decorative - Option 7
+    ### Option 7
     <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
       ["hop-decorative-option7"]
     } />
-    ### Decorative - Option 8
+    ### Option 8
     <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
       ["hop-decorative-option8"]
     } />
-    ### Decorative - Option 9
+    ### Option 9
     <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
       ["hop-decorative-option9"]
     } />
 
-    ## Status
+## Status
 
-    ### Status - Neutral
+    ### Neutral
     <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
       ["hop-status-neutral"]
     } />
-    ### Status - Progress
+    ### Progress
     <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
       ["hop-status-progress"]
     } />
-    ### Status - Positive
+    ### Positive
     <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
       ["hop-status-positive"]
     } />
-    ### Status - Caution
+    ### Caution
     <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
       ["hop-status-caution"]
     } />
-    ### Status - Negative
+    ### Negative
     <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
       ["hop-status-negative"]
     } />
-    ### Status - Inactive
+    ### Inactive
     <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
       ["hop-status-inactive"]
     } />
-    ### Status - Option 1
+    ### Option 1
     <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
       ["hop-status-option1"]
     } />
-    ### Status - Option 2
+    ### Option 2
     <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
       ["hop-status-option2"]
     } />
-    ### Status - Option 3
+    ### Option 3
     <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
       ["hop-status-option3"]
     } />
-    ### Status - Option 4
+    ### Option 4
     <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
       ["hop-status-option4"]
     } />
-    ### Status - Option 5
+    ### Option 5
     <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
       ["hop-status-option5"]
     } />
-    ### Status - Option 6
+    ### Option 6
     <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
       ["hop-status-option6"]
     } />
 
-    ## Data Visualization
+## Data Visualization
     <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
       ["hop-unavailable", "hop-text"]
     } />
@@ -225,90 +227,90 @@ export const tabs = [
     } />
 
     ## Decorative
-    ### Decorative - Option 1
+    ### Option 1
     <TableSection categoryKey={categoryKey} tokens={tokensDark.semantic[categoryKey]} categories={
       ["hop-decorative-option1"]
     } />
-    ### Decorative - Option 2
+    ### Option 2
     <TableSection categoryKey={categoryKey} tokens={tokensDark.semantic[categoryKey]} categories={
       ["hop-decorative-option2"]
     } />
-    ### Decorative - Option 3
+    ### Option 3
     <TableSection categoryKey={categoryKey} tokens={tokensDark.semantic[categoryKey]} categories={
       ["hop-decorative-option3"]
     } />
-    ### Decorative - Option 4
+    ### Option 4
     <TableSection categoryKey={categoryKey} tokens={tokensDark.semantic[categoryKey]} categories={
       ["hop-decorative-option4"]
     } />
-    ### Decorative - Option 5
+    ### Option 5
     <TableSection categoryKey={categoryKey} tokens={tokensDark.semantic[categoryKey]} categories={
       ["hop-decorative-option5"]
     } />
-    ### Decorative - Option 6
+    ### Option 6
     <TableSection categoryKey={categoryKey} tokens={tokensDark.semantic[categoryKey]} categories={
       ["hop-decorative-option6"]
     } />
-    ### Decorative - Option 7
+    ### Option 7
     <TableSection categoryKey={categoryKey} tokens={tokensDark.semantic[categoryKey]} categories={
       ["hop-decorative-option7"]
     } />
-    ### Decorative - Option 8
+    ### Option 8
     <TableSection categoryKey={categoryKey} tokens={tokensDark.semantic[categoryKey]} categories={
       ["hop-decorative-option8"]
     } />
-    ### Decorative - Option 9
+    ### Option 9
     <TableSection categoryKey={categoryKey} tokens={tokensDark.semantic[categoryKey]} categories={
       ["hop-decorative-option9"]
     } />
 
     ## Status
 
-    ### Status - Neutral
+    ### Neutral
     <TableSection categoryKey={categoryKey} tokens={tokensDark.semantic[categoryKey]} categories={
       ["hop-status-neutral"]
     } />
-    ### Status - Progress
+    ### Progress
     <TableSection categoryKey={categoryKey} tokens={tokensDark.semantic[categoryKey]} categories={
       ["hop-status-progress"]
     } />
-    ### Status - Positive
+    ### Positive
     <TableSection categoryKey={categoryKey} tokens={tokensDark.semantic[categoryKey]} categories={
       ["hop-status-positive"]
     } />
-    ### Status - Caution
+    ### Caution
     <TableSection categoryKey={categoryKey} tokens={tokensDark.semantic[categoryKey]} categories={
       ["hop-status-caution"]
     } />
-    ### Status - Negative
+    ### Negative
     <TableSection categoryKey={categoryKey} tokens={tokensDark.semantic[categoryKey]} categories={
       ["hop-status-negative"]
     } />
-    ### Status - Inactive
+    ### Inactive
     <TableSection categoryKey={categoryKey} tokens={tokensDark.semantic[categoryKey]} categories={
       ["hop-status-inactive"]
     } />
-    ### Status - Option 1
+    ### Option 1
     <TableSection categoryKey={categoryKey} tokens={tokensDark.semantic[categoryKey]} categories={
       ["hop-status-option1"]
     } />
-    ### Status - Option 2
+    ### Option 2
     <TableSection categoryKey={categoryKey} tokens={tokensDark.semantic[categoryKey]} categories={
       ["hop-status-option2"]
     } />
-    ### Status - Option 3
+    ### Option 3
     <TableSection categoryKey={categoryKey} tokens={tokensDark.semantic[categoryKey]} categories={
       ["hop-status-option3"]
     } />
-    ### Status - Option 4
+    ### Option 4
     <TableSection categoryKey={categoryKey} tokens={tokensDark.semantic[categoryKey]} categories={
       ["hop-status-option4"]
     } />
-    ### Status - Option 5
+    ### Option 5
     <TableSection categoryKey={categoryKey} tokens={tokensDark.semantic[categoryKey]} categories={
       ["hop-status-option5"]
     } />
-    ### Status - Option 6
+    ### Option 6
     <TableSection categoryKey={categoryKey} tokens={tokensDark.semantic[categoryKey]} categories={
       ["hop-status-option6"]
     } />