# Shared Hooks

Call these functions in your `hooks.source.js`. No imports needed - they're automatically available.

## Animations

| Function             | Description                                                                                                        |
| -------------------- | ------------------------------------------------------------------------------------------------------------------ |
| `globalAnimations()` | [Details](/elements-docs/elements-language/dev-resources/build-tools/shared-hooks/animations/global-animations.md) |
| `globalReveal()`     | [Details](/elements-docs/elements-language/dev-resources/build-tools/shared-hooks/animations/global-reveal.md)     |

## Background

| Function                       | Description                                                                                                                     |
| ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------- |
| `globalBackground()`           | [Details](/elements-docs/elements-language/dev-resources/build-tools/shared-hooks/background/global-background.md)              |
| `globalBgColor()`              | [Details](/elements-docs/elements-language/dev-resources/build-tools/shared-hooks/background/global-bg-color.md)                |
| `globalBgGradient()`           | [Details](/elements-docs/elements-language/dev-resources/build-tools/shared-hooks/background/global-bg-gradient.md)             |
| `globalBgImage()`              | [Details](/elements-docs/elements-language/dev-resources/build-tools/shared-hooks/background/global-bg-image.md)                |
| `globalBgImageFetchPriority()` | [Details](/elements-docs/elements-language/dev-resources/build-tools/shared-hooks/background/global-bg-image-fetch-priority.md) |
| `globalBgVideoThumbnail()`     | [Details](/elements-docs/elements-language/dev-resources/build-tools/shared-hooks/background/global-bg-video-thumbnail.md)      |

## Borders

| Function          | Description                                                                                                  |
| ----------------- | ------------------------------------------------------------------------------------------------------------ |
| `globalBorders()` | [Details](/elements-docs/elements-language/dev-resources/build-tools/shared-hooks/borders/global-borders.md) |
| `globalOutline()` | [Details](/elements-docs/elements-language/dev-resources/build-tools/shared-hooks/borders/global-outline.md) |

## Core

| Function                         | Description                                                                                                                  |
| -------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
| `addPrefixToTailwindClasses()`   | [Details](/elements-docs/elements-language/dev-resources/build-tools/shared-hooks/core/add-prefix-to-tailwind-classes.md)    |
| `advancedClasses()`              | [Details](/elements-docs/elements-language/dev-resources/build-tools/shared-hooks/core/advanced-classes.md)                  |
| `classnames()`                   | [Details](/elements-docs/elements-language/dev-resources/build-tools/shared-hooks/core/classnames.md)                        |
| `getHoverPrefix()`               | [Details](/elements-docs/elements-language/dev-resources/build-tools/shared-hooks/core/get-hover-prefix.md)                  |
| `globalHTMLTag()`                | [Details](/elements-docs/elements-language/dev-resources/build-tools/shared-hooks/core/global-html-tag.md)                   |
| `injectPrefixOnDarkModeColors()` | [Details](/elements-docs/elements-language/dev-resources/build-tools/shared-hooks/core/inject-prefix-on-dark-mode-colors.md) |

## Effects

| Function                  | Description                                                                                                           |
| ------------------------- | --------------------------------------------------------------------------------------------------------------------- |
| `bgPosition()`            | [Details](/elements-docs/elements-language/dev-resources/build-tools/shared-hooks/effects/bg-position.md)             |
| `globalEffects()`         | [Details](/elements-docs/elements-language/dev-resources/build-tools/shared-hooks/effects/global-effects.md)          |
| `globalFilters()`         | [Details](/elements-docs/elements-language/dev-resources/build-tools/shared-hooks/effects/global-filters.md)          |
| `globalOverlay()`         | [Details](/elements-docs/elements-language/dev-resources/build-tools/shared-hooks/effects/global-overlay.md)          |
| `globalOverlayColor()`    | [Details](/elements-docs/elements-language/dev-resources/build-tools/shared-hooks/effects/global-overlay-color.md)    |
| `globalOverlayGradient()` | [Details](/elements-docs/elements-language/dev-resources/build-tools/shared-hooks/effects/global-overlay-gradient.md) |
| `globalOverlayImage()`    | [Details](/elements-docs/elements-language/dev-resources/build-tools/shared-hooks/effects/global-overlay-image.md)    |

## Interactive

| Function         | Description                                                                                                     |
| ---------------- | --------------------------------------------------------------------------------------------------------------- |
| `globalFilter()` | [Details](/elements-docs/elements-language/dev-resources/build-tools/shared-hooks/interactive/global-filter.md) |
| `globalLink()`   | [Details](/elements-docs/elements-language/dev-resources/build-tools/shared-hooks/interactive/global-link.md)   |

## Layout

| Function                      | Description                                                                                                                  |
| ----------------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
| `getHiddenClasses()`          | [Details](/elements-docs/elements-language/dev-resources/build-tools/shared-hooks/layout/get-hidden-classes.md)              |
| `globalActAsGridOrFlexItem()` | [Details](/elements-docs/elements-language/dev-resources/build-tools/shared-hooks/layout/global-act-as-grid-or-flex-item.md) |
| `globalLayout()`              | [Details](/elements-docs/elements-language/dev-resources/build-tools/shared-hooks/layout/global-layout.md)                   |

## Navigation

| Function           | Description                                                                                                       |
| ------------------ | ----------------------------------------------------------------------------------------------------------------- |
| `globalMenuItem()` | [Details](/elements-docs/elements-language/dev-resources/build-tools/shared-hooks/navigation/global-menu-item.md) |
| `globalNavItems()` | [Details](/elements-docs/elements-language/dev-resources/build-tools/shared-hooks/navigation/global-nav-items.md) |
| `globalNavTitle()` | [Details](/elements-docs/elements-language/dev-resources/build-tools/shared-hooks/navigation/global-nav-title.md) |

## Sizing

| Function                  | Description                                                                                                          |
| ------------------------- | -------------------------------------------------------------------------------------------------------------------- |
| `aspectRatioClasses()`    | [Details](/elements-docs/elements-language/dev-resources/build-tools/shared-hooks/sizing/aspect-ratio-classes.md)    |
| `globalSizing()`          | [Details](/elements-docs/elements-language/dev-resources/build-tools/shared-hooks/sizing/global-sizing.md)           |
| `globalSizingContainer()` | [Details](/elements-docs/elements-language/dev-resources/build-tools/shared-hooks/sizing/global-sizing-container.md) |
| `objectClasses()`         | [Details](/elements-docs/elements-language/dev-resources/build-tools/shared-hooks/sizing/object-classes.md)          |

## Spacing

| Function                 | Description                                                                                                          |
| ------------------------ | -------------------------------------------------------------------------------------------------------------------- |
| `globalSpacing()`        | [Details](/elements-docs/elements-language/dev-resources/build-tools/shared-hooks/spacing/global-spacing.md)         |
| `globalSpacingMargin()`  | [Details](/elements-docs/elements-language/dev-resources/build-tools/shared-hooks/spacing/global-spacing-margin.md)  |
| `globalSpacingPadding()` | [Details](/elements-docs/elements-language/dev-resources/build-tools/shared-hooks/spacing/global-spacing-padding.md) |

## Transforms

| Function             | Description                                                                                                        |
| -------------------- | ------------------------------------------------------------------------------------------------------------------ |
| `globalTransforms()` | [Details](/elements-docs/elements-language/dev-resources/build-tools/shared-hooks/transforms/global-transforms.md) |

## Transitions

| Function                                 | Description                                                                                                                                |
| ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
| `aControlWantsHover()`                   | [Details](/elements-docs/elements-language/dev-resources/build-tools/shared-hooks/transitions/a-control-wants-hover.md)                    |
| `getAlpineTransitionAttributesDesktop()` | [Details](/elements-docs/elements-language/dev-resources/build-tools/shared-hooks/transitions/get-alpine-transition-attributes-desktop.md) |
| `getAlpineTransitionAttributesMobile()`  | [Details](/elements-docs/elements-language/dev-resources/build-tools/shared-hooks/transitions/get-alpine-transition-attributes-mobile.md)  |
| `globalTransitions()`                    | [Details](/elements-docs/elements-language/dev-resources/build-tools/shared-hooks/transitions/global-transitions.md)                       |

## Typography

| Function                          | Description                                                                                                                         |
| --------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
| `globalButtonFontAndTextStyles()` | [Details](/elements-docs/elements-language/dev-resources/build-tools/shared-hooks/typography/global-button-font-and-text-styles.md) |
| `globalHeadingColor()`            | [Details](/elements-docs/elements-language/dev-resources/build-tools/shared-hooks/typography/global-heading-color.md)               |
| `globalHeadingTextColor()`        | [Details](/elements-docs/elements-language/dev-resources/build-tools/shared-hooks/typography/global-heading-text-color.md)          |
| `globalInputFontAndTextStyles()`  | [Details](/elements-docs/elements-language/dev-resources/build-tools/shared-hooks/typography/global-input-font-and-text-styles.md)  |
| `globalTextFontsAndTextStyles()`  | [Details](/elements-docs/elements-language/dev-resources/build-tools/shared-hooks/typography/global-text-fonts-and-text-styles.md)  |

## Quick Usage

```javascript
function transformHook(rw) {
    const classes = classnames()
        .add(globalSpacing(rw))
        .add(globalBackground(rw))
        .toString();

    return { classes };
}

exports.transformHook = transformHook;
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.realmacsoftware.com/elements-docs/elements-language/dev-resources/build-tools/shared-hooks.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.