Fixed headers in Color

gsoft-inc · Oct 31, 2023 · 61861a0 · 61861a0
1 parent e89cedf
commit 61861a0
Showing 1 changed file with 54 additions and 52 deletions.
diff --git 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"]
     } />