Info hint background and link color fixes (#2953)

Author: zenoachtig

.changeset/rich-terms-smoke.md

@@ -0,0 +1,5 @@
+---
+'gitbook': patch
+---
+
+Info hint background and link color fixes

packages/gitbook/src/components/DocumentView/Hint.tsx

@@ -104,20 +104,22 @@ const HINT_STYLES: {
             '[&_.can-override-text]:text-neutral-strong',
         ],
         container:
-            'bg-neutral theme-muted:bg-neutral-base theme-bold-tint:bg-neutral-base theme-gradient:bg-neutral-12/1 border-neutral',
-        containerWithHeader: 'border-info-solid bg-neutral-subtle theme-gradient:bg-neutral-12/1',
+            'bg-info border-info theme-muted-tint:bg-info-solid/2 theme-bold-tint:bg-info-solid/2',
+        containerWithHeader: 'border-info-solid bg-info-subtle',
     },
     warning: {
         icon: 'circle-exclamation',
         iconColor: 'text-warning-subtle contrast-more:text-warning',
         header: 'bg-warning-active',
         body: [
             'text-neutral-strong',
-            '[&_a]:text-warning',
-            '[&_a:hover]:text-warning-strong',
+            'links-default:[&_a]:text-warning',
+            'links-default:[&_a]:hover:text-warning-strong',
+            'links-default:[&_a]:decoration-warning/6',
+            'links-accent:[&_a]:decoration-warning',
+            'decoration-warning/6',
             '[&_.can-override-bg]:bg-warning-active',
             '[&_.can-override-text]:text-warning-strong',
-            'decoration-warning/6',
         ],
         container: 'bg-warning border-warning',
         containerWithHeader: 'border-warning-solid bg-warning-subtle',
@@ -128,11 +130,13 @@ const HINT_STYLES: {
         header: 'bg-danger-active',
         body: [
             'text-neutral-strong',
-            '[&_a]:text-danger',
-            '[&_a:hover]:text-danger-strong',
+            'links-default:[&_a]:text-danger',
+            'links-default:[&_a]:hover:text-danger-strong',
+            'links-default:[&_a]:decoration-danger/6',
+            'links-accent:[&_a]:decoration-danger',
+            'decoration-danger/6',
             '[&_.can-override-bg]:bg-danger-active',
             '[&_.can-override-text]:text-danger-strong',
-            'decoration-danger/6',
         ],
         container: 'bg-danger border-danger',
         containerWithHeader: 'border-danger-solid bg-danger-subtle',
@@ -143,11 +147,13 @@ const HINT_STYLES: {
         header: 'bg-success-active',
         body: [
             'text-neutral-strong',
-            '[&_a]:text-success',
-            '[&_a:hover]:text-success-strong',
+            'links-default:[&_a]:text-success',
+            'links-default:[&_a]:hover:text-success-strong',
+            'links-default:[&_a]:decoration-success/6',
+            'links-accent:[&_a]:decoration-success',
+            'decoration-success/6',
             '[&_.can-override-bg]:bg-success-active',
             '[&_.can-override-text]:text-success-strong',
-            'decoration-success/6',
         ],
         container: 'bg-success border-success',
         containerWithHeader: 'border-success-solid bg-success-subtle',

packages/gitbook/src/components/primitives/StyledLink.tsx

@@ -13,13 +13,13 @@ export function StyledLink(props: Omit<LinkProps, 'style'> & { style?: ClassValu
             {...rest}
             className={tcls(
                 'underline',
-                'decoration-from-font',
+                'decoration-[max(0.07em,1px)]', // Set the underline to be proportional to the font size, with a minimum. The default is too thin.
                 'underline-offset-2',
                 'links-accent:underline-offset-4',
 
                 'links-default:decoration-primary/6',
                 'links-default:text-primary-subtle',
-                'links-default:hover:text-primary',
+                'links-default:hover:text-primary-strong',
                 'links-default:contrast-more:text-primary',
                 'links-default:contrast-more:hover:text-primary-strong',