@workday/canvas-kit-react/dist/commonjs/common/lib/theming/useThemedRing.d.ts

The parent module that contains all Workday Canvas Kit React components

import { EmotionCanvasTheme } from '@workday/canvas-kit-react/common';
import { CSSProperties } from '@workday/canvas-kit-react/tokens';
type paletteSelection = Exclude<keyof EmotionCanvasTheme['canvas']['palette'], 'common'>;
interface ContrastColors {
    outer?: string;
    inner?: string;
}
export declare function getPaletteColorsForFocusRing(type: paletteSelection, theme: EmotionCanvasTheme): ContrastColors;
/**
 * This is a way to automatically add themed colors to your input and is helpful when showing alerts, success or errors to users.
 * It supports `error`, `alert`, and `success` states. It will try and use the corresponding
 * `main` colors from your `CanvasThemePalette` unless they do not meet accessibility contrast, in
 * which case the outer ring will use the `darkest` color. This hook will also show a `focusOutline`
 * ring when the input is focused. Note: You should not rely on these colors alone to differentiate
 * alerts, but use them in combination with icons or hint text.
 * ```tsx
 * // Add here jsx pragma to use css
 * import {jsx} from '@emotion/react';
 * import React from 'react';
 * import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
 * import {useThemedRing} from '@workday/canvas-kit-react/common';
 *
 * export const MyInput = ({handleChange}) => {
 *  const [value, setValue] = React.useState('invalid@email');
 *  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
 *    setValue(event.target.value);
 *  };
 *
 *  const alertStyles = useThemedRing('alert');
 *
 *  return (
 *    <TextInput>
 *     <TextInput.Label>Email</TextInput.Label>
 *      <TextInput.Field css={alertStyles} onChange={handleChange} value={value} />
 *      <TextInput.Hint>Please enter a valid email.</TextInput.Hint>
 *    </TextInput>
 *  );
 * };
 *```
 */
export declare const useThemedRing: (type: paletteSelection) => CSSProperties;
export {};
//# sourceMappingURL=useThemedRing.d.ts.map