chore(realm): update links in markdown (#22823)

Co-authored-by: Jacek Łękawa <164185257+JLekawa@users.noreply.github.com>
remoteId: rem_01jwbtfqhbbam07z9j9m0etng6
remoteUpdateId: grupd_01kqexdka7391k8zpbjacp4sr0
branchName: main
commitSha: e2b2f2e27f3c8574a915aef841d7e862e06119cd
commitUrl: Redocly/redocly@e2b2f2e

Author: yuliiakachmaryk

docs/realm/branding/css-variables/component.md

@@ -150,29 +150,36 @@
 --banner-button-icon-right-padding: 1px 10px 1px var(--spacing-sm);
 --banner-button-margin: 0 var(--spacing-xs);
 --banner-padding: var(--spacing-xs);
---banner-link-decoration: var(--link-decoration-hover);
 --banner-min-height: 38px;
 --banner-gap: var(--spacing-xxs);
 
 --banner-info-bg-color: var(--color-info-base);
 --banner-info-text-color: var(--color-static-white);
 --banner-info-icon-color: var(--color-static-white);
 --banner-info-link-color: var(--banner-info-text-color);
+--banner-info-link-decoration: underline 1px var(--banner-info-link-color);
+--banner-info-link-decoration-hover: underline 2px var(--banner-info-link-color);
 
 --banner-success-bg-color: var(--color-success-base);
 --banner-success-text-color: var(--color-static-white);
 --banner-success-icon-color: var(--color-static-white);
 --banner-success-link-color: var(--banner-success-text-color);
+--banner-success-link-decoration: underline 1px var(--banner-success-link-color);
+--banner-success-link-decoration-hover: underline 2px var(--banner-success-link-color);
 
 --banner-warning-bg-color: var(--color-warning-base);
 --banner-warning-text-color: var(--color-black);
 --banner-warning-icon-color: var(--color-black);
 --banner-warning-link-color: var(--banner-warning-text-color);
+--banner-warning-link-decoration: underline 1px var(--banner-warning-link-color);
+--banner-warning-link-decoration-hover: underline 2px var(--banner-warning-link-color);
 
 --banner-error-bg-color: var(--color-error-base);
 --banner-error-text-color: var(--color-static-white);
 --banner-error-icon-color: var(--color-static-white);
 --banner-error-link-color: var(--banner-error-text-color);
+--banner-error-link-decoration: underline 1px var(--banner-error-link-color);
+--banner-error-link-decoration-hover: underline 2px var(--banner-error-link-color);
 ```
 
 </details>
@@ -1047,15 +1054,17 @@
 <summary>Link</summary>
 
 ```css
---link-color-primary: var(--color-blue-6);
---link-decoration: none;
---link-font-weight: var(--font-weight-regular);
---link-color-primary-hover: var(--color-blue-7);
---link-color-primary-pressed: var(--color-blue-8);
---link-decoration-hover: underline;
+--link-color-primary: var(--link-color-primary-palette, var(--link-color-primary-legacy));
+--link-decoration: underline 1px var(--color-primary-base, var(--link-color-primary-legacy));
+--link-underline-offset: 4px;
+--link-font-weight: var(--font-weight-medium);
+--link-color-primary-hover: var(--link-color-primary-palette, var(--link-color-primary-hover-legacy));
+--link-color-primary-pressed: var(--link-color-primary-palette, var(--link-color-primary-pressed-legacy));
+--link-decoration-hover: underline 2px var(--color-primary-base, var(--link-color-primary-hover-legacy));
+
 --link-color-inverse: var(--color-blue-5);
---link-color-visited: var(--color-purple-7);
---link-visited-decoration: none;
+--link-color-visited: var(--link-color-primary-palette, var(--link-color-visited-legacy));
+--link-decoration-visited: underline 1px var(--color-primary-base, var(--link-color-visited-legacy));
 ```
 
 </details>

docs/realm/branding/customize-styles.md

@@ -96,6 +96,27 @@ Toggle between color modes to see the differences.
 3. **Override variables** - Add your custom values to the `@theme/styles.css` file
 4. **Test in both modes** - Ensure your styling works well in both light and dark modes using [color mode customization](./customize-color-modes.md)
 
+## Restore legacy link styling
+
+If you want links to look like they did previously (no underline by default, underline on hover), add the following overrides in your `@theme/styles.css` file:
+
+```css {% title="@theme/styles.css" %}
+:root {
+  --link-decoration: none;
+  --link-decoration-visited: none;
+}
+```
+
+If you prefer no underlines in any link state, including hover:
+
+```css {% title="@theme/styles.css" %}
+:root {
+  --link-decoration: none;
+  --link-decoration-hover: none;
+  --link-decoration-visited: none;
+}
+```
+
 ## Style products individually
 
 When your project has multiple products configured, a product-specific CSS class is automatically added to the root element (`<html>`) based on the current product.