fix(heading): improve heading style (#7628)

* fix(ui): missing style

* fix: theme

* fix typo in comment

Co-authored-by: Copilot <[email protected]>
Signed-off-by: Augustin Mauroy <[email protected]>

* revert theme change

---------

Signed-off-by: Augustin Mauroy <[email protected]>
Co-authored-by: Copilot <[email protected]>

Author: AugustinMauroy

packages/ui-components/.stylelintrc.mjs

@@ -45,5 +45,7 @@ export default {
     'import-notation': 'string',
     // Allow the `@apply` at rule as its part of Tailwind
     'at-rule-no-deprecated': [true, { ignoreAtRules: CUSTOM_AT_RULES }],
+    // We need complex `:not()` for headings with anchor
+    'selector-not-notation': null,
   },
 };

packages/ui-components/__design__/text.stories.tsx

@@ -27,6 +27,12 @@ export const InlineCode: StoryObj = {
       <p>
         This is an example of <code>inline code block</code>
       </p>
+      <p>
+        This is an example of{' '}
+        <a href="https://nodejs.org/">
+          <code>inline code block inside link</code>
+        </a>
+      </p>
     </main>
   ),
 };
@@ -44,4 +50,31 @@ export const Headings: StoryObj = {
   ),
 };
 
+// Create the behavior of the headings with links
+// on nodejs.org, this is happening due to `rehype-autolink-headings`
+export const HeadingsWithLinks: StoryObj = {
+  render: () => (
+    <main>
+      <h1 id="heading-1">
+        <a href="#heading-1">HTML Section Heading 1</a>
+      </h1>
+      <h2 id="heading-2">
+        <a href="#heading-2">HTML Section Heading 2</a>
+      </h2>
+      <h3 id="heading-3">
+        <a href="#heading-3">HTML Section Heading 3</a>
+      </h3>
+      <h4 id="heading-4">
+        <a href="#heading-4">HTML Section Heading 4</a>
+      </h4>
+      <h5 id="heading-5">
+        <a href="#heading-5">HTML Section Heading 5</a>
+      </h5>
+      <h6 id="heading-6">
+        <a href="#heading-6">HTML Section Heading 6</a>
+      </h6>
+    </main>
+  ),
+};
+
 export default { title: 'Design System' } as MetaObj;

packages/ui-components/styles/markdown.css

@@ -75,7 +75,8 @@ main {
       dark:text-white;
   }
 
-  a,
+  /* link that isn't inside a heading */
+  a:not(h1 > a):not(h2 > a):not(h3 > a):not(h4 > a):not(h5 > a):not(h6 > a),
   .anchor {
     @apply max-xs:font-semibold
       text-green-600
@@ -93,6 +94,10 @@ main {
     &:has(code) {
       @apply max-xs:decoration-neutral-800
         dark:max-xs:decoration-neutral-200;
+
+      code {
+        @apply text-inherit;
+      }
     }
   }
 

packages/ui-components/styles/theme.css

@@ -76,7 +76,6 @@
   --color-white: #fff;
   --color-transparent: 'transparent';
   --color-shadow: #101828;
-  --inherit: 'inherit';
   --shadow-xs: 0px 1px 2px 0px --alpha(var(--color-shadow, #101828) / 5%);
   --shadow-lg:
     0px 4px 6px -2px --alpha(var(--color-shadow, #101828) / 3%),
@@ -170,3 +169,7 @@
     var(--tw-gradient-to)
   );
 }
+
+@utility text-inherit {
+  color: inherit;
+}