import { CSSObject } from 'styled-components';
import { AnyTheme, OptionalThemedProps } from '../types';
/**
 * @file
 * A collection of style-related helper functions. All of them return a single object containing
 * DOM CSS properties, for example: `{ display: …, fontFamily: … }`.
 */
/**
 * `clearfix` is used on a container to ensure its height is at least as tall as any floating
 * children.
 *
 *  ##### Example
 *  ```js
 *  import styled from 'styled-components';
 *  import { clearfix } from '@splunk/themes/mixins';
 *
 *  const myBlock = styled.div`
 *      ${clearfix()};
 *  `
 *  ```
 * @public
 */
export declare function clearfix(): {
    '&::after': CSSObject;
};
/**
 * Use `ellipsis` for overflowing text. Requires `display` to be set to `inline-block` or `block`.
 *
 *  ##### Example
 *  ```js
 *  import styled from 'styled-components';
 *  import { ellipsis } from '@splunk/themes/mixins';
 *
 *  const myBlock = styled.div`
 *      ${ellipsis()};
 *      width: 300px;
 *  `
 *  ```
 * @public
 */
export declare function ellipsis(): CSSObject;
/**
 * Force an element to be exactly 100% wide so that it doesn't overflow the page.
 *
 *  ##### Example
 *  ```js
 *  import styled from 'styled-components';
 *  import { printWidth100Percent } from '@splunk/themes/mixins';
 *
 *  const myBlock = styled.div`
 *      @media print {
 *          .myElement {
 *             ${printWidth100Percent()};
 *          }
 *      }
 *  }
 *  `
 *  ```
 *  @public
 */
export declare function printWidth100Percent(): CSSObject;
/**
 * Hide an element (such as a button).
 *
 *  ##### Example
 *  ```js
 *  import styled from 'styled-components';
 *  import { printHide } from '@splunk/themes/mixins';
 *
 *  const myBlock = styled.div`
 *      @media print {
 *          .myElement {
 *              ${printHide()};
 *          }
 *      }
 *  }
 *  ```
 * @public
 */
export declare function printHide(): CSSObject;
/**
 * Remove background gradients and images.
 *
 *  ##### Example
 *  ```js
 *  import styled from 'styled-components';
 *  import { printNoBackground } from '@splunk/themes/mixins';
 *
 *  const myBlock = styled.div`
 *      @media print {
 *          .myElement {
 *              ${printNoBackground()};
 *          }
 *      }
 *  }
 *  ```
 * @public
 */
export declare function printNoBackground(): CSSObject;
/**
 * Ensure that all text wraps so that it doesn't overflow the page.
 *
 *  ##### Example
 *  ```js
 *  import styled from 'styled-components';
 *  import { printWrapAll } from '@splunk/themes/mixins';
 *
 *  const myBlock = styled.div`
 *      @media print {
 *          .myElement {
 *              ${printWrapAll()};
 *          }
 *      }
 *  }
 *  ```
 * @public
 */
export declare function printWrapAll(): CSSObject;
/**
 * Visually hide content. Typically used to target content for assistive technologies.
 *
 *  ##### Example
 *  ``` js
 *  import { screenReaderContent } from '@splunk/themes/mixins';
 *
 *  .myElement {
 *      ${screenReaderContent()};
 *  }
 *  ```
 * @public
 */
export declare function screenReaderContent(): CSSObject;
/**
 * Visually hide interactive elements and reveal them on focus. Use this mixin to allow
 * keyboard users to skip over repeated content, such as navigation menus
 *
 * ##### Example
 * ```js
 * import styled from 'styled-components';
 * import Link from '@splunk/react-ui/Link';
 * import mixins from '@splunk/themes';
 *
 * const skipLink = styled(Link)`
 *   ${mixins.skipLink()};
 *  `;
 * // or if you have a container with several links inside it:
 * const skipLinkContainer = styled.div`
 *   ${mixins.skipLink()};
 * `;
 * ```
 * @public
 */
export declare function skipLink(): CSSObject;
type TemplateFunction<T extends AnyTheme> = (props: OptionalThemedProps<T>) => string | undefined;
type ColorParameter<T extends AnyTheme> = string | TemplateFunction<T>;
/**
 * Calculates how one color would appear over another using a normal blend mode.
 * Colors can either be strings or functions, such as variable functions.
 *
 *  ##### Example
 *  ```js
 *  import styled from 'styled-components';
 *  import { overlayColors } from '@splunk/themes/mixins';
 *  import { interactiveColorAccent, interactiveColorOverlaySelected } from '@splunk/themes/variables';
 *
 *  const myButton = styled.button`
 *      background: ${overlayColors(interactiveColorAccent, interactiveColorOverlaySelected)};
 *  `
 *  ```
 * @name overlayColors
 * @kind function
 * @param {string|function} background
 * @param {string|function} foreground The color to overlay over the background.
 * @public
 */
export declare function overlayColors<T extends AnyTheme>(c1: ColorParameter<T>, c2: ColorParameter<T>): (props: OptionalThemedProps<T>) => string;
/**
 * Sets the alpha value on a given color.
 *
 *  ##### Example
 *  ```js
 *  import styled from 'styled-components';
 *  import { colorWithAlpha } from '@splunk/themes/mixins';
 *  import { actionColorBackgroundPrimary } from '@splunk/themes/variables';
 *
 *  const myButton = styled.button`
 *      background: ${colorWithAlpha(actionColorBackgroundPrimary, 0.5)};
 *  `
 *  ```
 * @name colorWithAlpha
 * @kind function
 * @param {string|function} color
 * @param {number} alpha The alpha value accepts range between 0-1.
 * @public
 */
export declare function colorWithAlpha<T extends AnyTheme>(color: ColorParameter<T>, alpha: number): (props: OptionalThemedProps<T>) => string;
declare const _default: {
    clearfix: typeof clearfix;
    ellipsis: typeof ellipsis;
    printWidth100Percent: typeof printWidth100Percent;
    printHide: typeof printHide;
    printNoBackground: typeof printNoBackground;
    printWrapAll: typeof printWrapAll;
    screenReaderContent: typeof screenReaderContent;
    skipLink: typeof skipLink;
    colorWithAlpha: typeof colorWithAlpha;
    overlayColors: typeof overlayColors;
};
export default _default;